KeyDown Dispatch Exemplo

keydown.js

import {useEffect, useState} from "react";

function App() {
    const [value, setValue] = useState("");

    useEffect(() => {
        window.addEventListener('keydown', (e) => handleKeyDown(e));

        return () => {
            window.removeEventListener('keydown', (e) => handleKeyDown(e));
        }
    }, []);

    const handleKeyDown = (e: any) => {
        if (!e.isTrusted) {
            setValue((prev) => {
                console.log(prev, e.key);
                return prev + e.key;
            });
        }
    }

    function handleClick(num: string) {
        window.dispatchEvent(new KeyboardEvent("keydown",
            {
                key: num,
                which: num.charCodeAt(0),
            }
        ));
    }

    return (
        <div style={{
            background: "#23232d",
            minHeight: "100vh",
            height: "100%",
            display: "flex",
            justifyContent: "center",
        }}>

            <div style={{
                padding: "2em",
                maxWidth: "300px",
                margin: "auto",
            }}>
                <input
                    value={value}
                    style={{
                        padding: 10,
                        width: "100%",
                        background: "transparent",
                        color: "#fff",
                        fontWeight: 600
                    }}
                />

                <div style={{background: "#2b2b37", padding: "2em"}}>
                    <button
                        style={{color: "#fff", background: "#292933", padding: 10, fontWeight: 600, marginRight: 20}}
                        onClick={() => handleClick("1")}
                    >
                        Tecla 1
                    </button>

                    <button
                        style={{color: "#fff", background: "#292933", padding: 10, fontWeight: 600}}
                        onClick={() => handleClick("9")}
                    >
                        Tecla 9
                    </button>
                </div>
            </div>


        </div>
    );
}

export default App;