diff --git a/examples/web/react/components/button/button.tsx b/examples/web/react/components/button/button.tsx index 21adf1062f478afc7bd8f5bc6fccba32bcc2c2fe..4778c40533baa41c7aae739ed714dfa2a90cbaa5 100644 --- a/examples/web/react/components/button/button.tsx +++ b/examples/web/react/components/button/button.tsx @@ -44,9 +44,8 @@ export const Button: FC<ButtonProps> = ({ event.target.value = ""; }; const onKeyPress = (event: React.KeyboardEvent) => { - if (event.key == "Enter") { - onClick && onClick(); - } + if (event.key !== "Enter") return; + onClick && onClick(); }; const renderSimple = () => ( <span diff --git a/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx b/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx index 897cc353ee2d3b9bb20ce935a40c507a4ab68a84..dd5bafd7fa43327dee3a25e5e96f93b3b146d396 100644 --- a/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx +++ b/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx @@ -17,7 +17,14 @@ export const KeyboardChip8: FC<KeyboardChip8Props> = ({ <span className="key" key={key} - onKeyDown={() => onKeyDown && onKeyDown(key)} + tabIndex={0} + onKeyDown={(event) => { + if (event.key !== "Enter") return; + onKeyDown && onKeyDown(key); + event.stopPropagation(); + event.preventDefault(); + }} + onClick={() => onKeyDown && onKeyDown(key)} > {key} </span> diff --git a/examples/web/react/components/keyboard-gb/keyboard-gb.tsx b/examples/web/react/components/keyboard-gb/keyboard-gb.tsx index f1e4816bbb1b1ffa51862e07196de7403bd04902..1696c9370efbe53ad8dccb6885d5978a323a5957 100644 --- a/examples/web/react/components/keyboard-gb/keyboard-gb.tsx +++ b/examples/web/react/components/keyboard-gb/keyboard-gb.tsx @@ -28,6 +28,21 @@ export const KeyboardGB: FC<KeyboardGBProps> = ({ " " )} key={keyName || key} + tabIndex={0} + onKeyDown={(event) => { + if (event.key !== "Enter") return; + setPressed(true); + onKeyDown && onKeyDown(keyName || key); + event.stopPropagation(); + event.preventDefault(); + }} + onKeyUp={(event) => { + if (event.key !== "Enter") return; + setPressed(false); + onKeyUp && onKeyUp(keyName || key); + event.stopPropagation(); + event.preventDefault(); + }} onMouseDown={(event) => { setPressed(true); onKeyDown && onKeyDown(keyName || key);