physicalKeyboardHighlight issue with background: linear-gradient()

This issue has been tracked since 2022-07-24.

Simple-keyboard version
react-simple-keyboard 3.4.176 (tested on versions from a few of the sandboxes in the docs, including js version)

Describe the bug
Styling .hg-button on custom or default theme with background: linear-gradient(...) results in physicalKeyboardHighlight not displaying properly.

In this sandbox repro forked from one of the sandboxes in the docs, you can only see highlight css from keys that don't have linear-gradient().

hodgef wrote this answer on 2022-07-24

Hey @YungMilky,

This is now fixed in the latest version of simple-keyboard and react-simple-keyboard.

You can use physicalKeyboardHighlightBgColor to pass in your background property value:
https://hodgef.com/simple-keyboard/documentation/options/physicalkeyboardhighlightbgcolor/

The value passed there is applied to the button's style tag, as shown here:

buttonDOM.style.background =

Regards,
Francisco Hodge

More Details About Repo
Owner Name hodgef
Repo Name simple-keyboard
Full Name hodgef/simple-keyboard
Language JavaScript
Created Date 2018-03-02
Updated Date 2022-12-02
Star Count 1737
Watcher Count 20
Fork Count 130
Issue Count 0

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date