Background

   The current custom keyboard has supports keys ( buttons ) by separating it through two commas by entering it through in the custom Keyboard inputbox,  The input box currently  has max character length of 51 characters ( 26 English Alphabets and 25 commas ).

Problem Statement

Statement : 1

   In the custom keyboard expected to support 26 Characters Irrespective of the language . But almost all indic languages characters created through combing Base Character + Sound Character.
But We calculate the length limitation through javascript String.length Which does't fit with indian languages.

Example 
जानवरों
Actual Length 4, Javascript Length 7	

Statement : 2

The keyboard does allocate a fixed width for each keys by calculating through

[ ( Number of Keys / 2 ) / 100 ] %

As it applies fixed length for all the keys cases the keyboard layout breaks.

Solutions

Solution for Problem Statement 1

Using grapheme splitter to Count the Number of characters

var graphemeSplitter = require("grapheme-splitter")
var splitter = new graphemeSplitter();
console.log(splitter.countGraphemes("जानवरों")) // As expected counts it as 4

Limitations on the solution

On some cases does It does not work exactly as expected

Acknowledgement from Grapheme Splitter

Solution for Problem Statement 2

As giving the fixed length for each keys breaks the UI, Using Flex-box feature gives dynamic width for each keys based it's rendered width.

Changes in Keyboard row div container

display : flex;
flex-wrap : true;

Changes in each keys ( buttons )

flex-grow : 1;
min-width: 7%;

Applying a minimum width ensures enough space for each button.