hodgef/react-simple-keyboard

Shift and Capslock buttons are not highlighted

alex-waverley opened this issue · 2 comments

React-simple-keyboard version - 3.5.17

When the option physicalKeyboardHighlight={true} is used together with physicalKeyboardHighlightPress={true}, Shift or Capslock buttons are not highlighted. If physicalKeyboardHighlightPress={false} it works as expected.

keyboard highlight issue

@alex-waverley This is normal, pressing shift will result in a re-render of the layout and highlight will be lost. I don't believe this can be fixed in an optimal way.


Note: If you'd like to implement physicalKeyboard in a different way, you definitely can. You can remove all physicalKeyboard* options, then create a key listener on your end and call the physicalKeyboard methods as needed (to translate the key.code into the layout key):
https://github.com/hodgef/simple-keyboard/blob/master/src/lib/services/PhysicalKeyboard.ts#L137

e.g.: keyboard.physicalKeyboard.getSimpleKeyboardLayoutKey(e)

One way this highlight issue could be fixed is to wait a bit between the highlight and the press action (so the highlight can be seen). I don't think this is optimal, but you could opt to do so in your own implementation.

Thanks!