Robin Malfait
4459689beb
Browsers. Are. Crazy. In JSDOM, when you fire an event, you only get that specific event. You don't get all the magic that the browser gives you. For example, when you are focused on a button and press to "Tab" then in JSDOM you would only get a keydown event. However in the browser you get this chain of events: 1. `keydown` on the current element 2. `blur` on the current element 3. `focus` on the new element 4. `keyup` on the new element I implemented this "magic", for the `Tab`, `Enter` and `Space` key for now. Those are the most important currently. `Enter` and `Space` also trigger `click` events for example. I also have a "generic" implementation, where a normal press results in: 1. `keydown` 2. `keypress` (in case it has a `charCode` and is "printable", so `alt` is ignored) 3. `keyup` I also ensured that the cancelation when you use an `event.preventDefault()` happens correctly. Here is a fun summary: https://twitter.com/malfaitrobin/status/1354472678128820234 Press "Enter" on a button -> keydown, keypress, click, keyup Press "Space" on a button -> keydown, keypress, keyup, click Press "Enter" or "Space" on a button, with event.preventDefault() in the keydown listener -> keydown, keyup Press "Enter" on a button, with event.preventDefault() in the keypress listener -> keydown, keypress, keyup Press "Space" on a button, with event.preventDefault() in the keypress listener -> keydown, keypress, keyup, click
34 lines
824 B
JSON
34 lines
824 B
JSON
{
|
|
"include": ["src", "types"],
|
|
"compilerOptions": {
|
|
"module": "esnext",
|
|
"lib": ["dom", "esnext"],
|
|
"importHelpers": true,
|
|
"declaration": true,
|
|
"sourceMap": true,
|
|
"rootDir": "./src",
|
|
"strict": true,
|
|
"noUnusedLocals": true,
|
|
"noUnusedParameters": true,
|
|
"noImplicitReturns": true,
|
|
"noFallthroughCasesInSwitch": true,
|
|
"downlevelIteration": true,
|
|
"moduleResolution": "node",
|
|
"baseUrl": "./",
|
|
"paths": {
|
|
"@headlessui/react": ["src"],
|
|
"*": ["src/*", "node_modules/*"]
|
|
},
|
|
"jsx": "preserve",
|
|
"esModuleInterop": true,
|
|
"target": "es5",
|
|
"allowJs": true,
|
|
"skipLibCheck": true,
|
|
"forceConsistentCasingInFileNames": true,
|
|
"noEmit": true,
|
|
"resolveJsonModule": true,
|
|
"isolatedModules": true
|
|
},
|
|
"exclude": ["node_modules"]
|
|
}
|