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
* add watch script
* make interactions in Vue and React consistent
* re-work focus restoration
When we click outside of the Menu or Listbox, we want to
restore the focus to the Button, *unless* we clicked on/in an element
that is focusable in itself. For example, when the Menu is open and you
click in an input field, the input field should stay focused. We should
also close the Menu itself at this point.
* add examples with multiple elements
* bump dependencies
* add Switch component
* add tests to verify that we can click the label to toggle the Switch
* use onKeyUp to prevent triggering the onClick in firefox
* make jest monorepo aware
* add @testing-library/jest-dom for custom matchers
This way we can use expect(element).toHaveAttribute(key, value?)
* abstract keys enum
* change type to unknown, because we don't know the return value
* update use-id hook, make it suspense aware
Thanks Reach UI!
* hoist the disposables collection
* add accessbility assertions for listbox
Also made it consistent for the Menu component and simplified some of the assertions
* add use-computed hook
This allows us re-render when hooks change, but also return a value. So this is a combination of useEffect and a useState value.
* add Listbox component
* bump dependencies
* add listbox example
* add lint-staged
This way we will only lint the files that have been staged and ready to be committed instead of the whole codebase
* add missing prevent defaults
* improve tests to verify that we can actually update the value of the listbox
* scroll the active listbox item into view
* small optimization, only focus "Nothing" on pointer leave when we are the active item
We used to always go to "Nothing" on pointer leave. And while this code
doesn't get called often, it *gets* called if you are using your arrow
keys and the mouse pointer is still over the list.
* bump dependencies
Also moved the tailwind dependencies to the root
* fix typo
* drop the default Transition inside the Menu and Listbox components
* update examples to reflect drop of default Transition wrapper
* rename Listbox.{Items,Item} to Listbox.{Options,Option}
Also rename all instances of `item` to `option` in tests and comments
and what have you...
* fix typo
* drop disabled prop, use aria-disabled only
Robin Malfait