Background

   The keyboard plugin supports custom keys ( buttons  ) by entering keys through in input box each separated out through comma.

Jira ticket

Problem Statement

Statement: 1

   As per requirement user should be allowed to enter maximum of 26 Linguistic Character. Splitting or counting a character linguistically is not straight forward in Javascript.

Image Removed

Statement : 2

In the current keyboard layout implementation, All the keys fixed to the same width. The disadvantage of it is when applying a fixed width for a keys key which has many characters in it, The key wraps inside the fixed width. Because of that the keyboard layout breaks.

Key Design Issues

Solutions

Solution The solution for design Issue -1 

Telugu
"సింహం అడవి రాజు" character length 9
"పసిఫిక్ సముద్రం ప్రపంచంలోనే అతిపెద్ద సముద్రం" character length 27

Tamil
"சிங்கம் காட்டில் அரசன்"  character length 14
"பசிபிக் கடல் உலகிலேயே மிகப் பெரிய கடல் ஆகும்" character length 30

Hindi
"जंगल का राजा शेर है" character length 13

Limitations on the solution

Grapheme Splitter does not handle all the test cases,  For some inputs, it is not determining the character length rightcorrectly. Also there was no docs about it's test coverage on a for a  specific language.

Case 1 
"प्र"
Expected value of character length 1
Actual value through grapheme splitter is 2

Case 2
க்ஷௌ
Expected value of character length 1
Actual value through grapheme splitter is 2

Challenges Involved in implementing the solution ( Grapheme Splitter )

If the User allowed to enter 26 keys with each containing 1 linguistic character count we face two main challenges.

Challenge 1

maxlength property of the input box cannot be static,

It needs to dynamic based on user input to input-box. Currently the maxlength max length is set as 51. ( 26 character + 25 Comma )

Challenge 2

In the keyboard layout two rows don't have enough space.

...

Rendering of the above input in keyboard

Solution for design Issue 2

Using Flex-box CSS feature enables dynamic width for each keys.

...

display : flex;
flex-wrap : truewrap;

Changes in each keys ( buttons )

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