Remove the margin space between keyboard buttons

[pierre-kubica]

I'm trying to produce the normal behavior with this virtual keyboard:

• show the virtual keyboard when the input text get focus (and make it bottom sticky)
• hide it when it loses the focus
• keep focus on the input text when a keyboard button is pressed and set back the previous caret position

I found a solution by playing with some setTimeout and clearInterval on different events.

But I have to deal with an exception here: what if the user clicks between 2 keys (and it happens a lot, I tried it without purpose). For that I have to deal with an extra behavior with other checks.

What I suggest is to remove spaces between keyboard buttons and replace them with padding. So the html should be refactored a bit (an extra layer should be added).

You'll see on the short video the last click makes the keyboard hidden.

https://github.com/hodgef/react-simple-keyboard/assets/24812106/1c020f21-76ca-49d3-8ef7-4ce9c318b781

[pierre-kubica]

Sorry, Actually there are options to avoid that kind of behavior. I didn't read all the entire doc. My bad...

[hodgef]

Glad you found the solution! Regards