tailwindcss-stimulus-components icon indicating copy to clipboard operation
tailwindcss-stimulus-components copied to clipboard

Dropdown menu does not support proper keyboard navigation

Open cmer opened this issue 3 years ago • 4 comments

  • Using up/down arrows scrolls the page
  • Pressing ESC should close the menu
  • Pressing ENTER on a selection should be equivalent to clicking the link (unsure if implemented?)

See video: https://cln.sh/coIGPO

cmer avatar Aug 20 '21 01:08 cmer

PRs welcome!

excid3 avatar Aug 20 '21 02:08 excid3

@excid3 @cmer check out my PR that addresses this.!

rockwellll avatar Nov 07 '21 22:11 rockwellll

@A7madXatab at the risk of exposing myself as even more of a rank amateur with JS, could the tests be failing in your PR because you're importing 'stimulus' instead of '@hotwire/stimulus'?

hms avatar Nov 17 '21 18:11 hms

@hms thanks for the heads up. I've fetched upstream and updated deps in my fork. Now the tests seem to be failing because it says

> [email protected] test /home/runner/work/tailwindcss-stimulus-components/tailwindcss-stimulus-components
> NODE_ENV=test jest


  ●  Cannot log after tests are done. Did you forget to wait for something async in your test?
    Attempted to log "Error disconnecting controller

    TypeError: Cannot read property 'removeEventListener' of null
        at extended.disconnect (/home/runner/work/tailwindcss-stimulus-components/tailwindcss-stimulus-components/src/dropdown.js:93:16)

and it's scary because look at the line

https://github.com/A7madXatab/tailwindcss-stimulus-components/blob/a5501f54d9403817c6dc21951c9cd3e5accfee62/src/dropdown.js#L96

To my surprise it is in fact this line that is causing the errors

document.removeEventListener('keydown', this.keyboardListener);

I've changed it to

document?.removeEventListener('keydown', this.keyboardListener);

And now they are passing. @excid3 anything on this?. Thanks @hms

rockwellll avatar Nov 17 '21 19:11 rockwellll