Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

arrow keys? #354

Closed
benmonro opened this issue Jan 7, 2020 · 16 comments · Fixed by #404
Closed

arrow keys? #354

benmonro opened this issue Jan 7, 2020 · 16 comments · Fixed by #404
Assignees
Labels
enhancement New feature or request released

Comments

@benmonro
Copy link
Member

benmonro commented Jan 7, 2020

for the life of me I can't seem to be able to fire an event for a keypress with arrow keys on a radio button, is this a problem in jsdom, or am I crazy?

  fireEvent.keyPress(myRadioButton, { key: 'ArrowUp', which: 38, keyCode: 38 });
@Stuj1
Copy link

Stuj1 commented Jan 10, 2020

fireEvent is not part of the user-event library, it is dom-testing-library. The user-event library was created because of such issues with fireEvent for keyboard events, which in my experience it has been a lot better at. However, I'm not sure that user-event can simulate soft keys. I'll have to look at the source for user-events to see if soft-key support is possible.

@benmonro
Copy link
Member Author

Apologies I did mean user event

@Stuj1
Copy link

Stuj1 commented Jan 14, 2020

Ok, so there is no soft key support in user-event.

@benmonro
Copy link
Member Author

Do you think it should be?

@Stuj1
Copy link

Stuj1 commented Jan 20, 2020

Hmm. It's currently pretty simple to use:
userEvent.type(input1, 'a');

So you might think you could easily provide an object for softkey interaction:
userEvent.type(input1, { key: 'ArrowUp', which: 38, keyCode: 38 });

However, the 'type' method also handles strings of multiple characters:
userEvent.type(input1, 'apples');

How would you include a soft key in this sequence? Perhaps if soft key is only supported for single key strokes. Otherwise you would have to provide an array of input keystrokes, which could get a bit messy.

@Gpx
Copy link
Member

Gpx commented Feb 18, 2020

Probably related to #31
At some point, we will want to support things like userEvent.type('hella{left_arrow}{delete}o') but for now it's not possible

@benmonro
Copy link
Member Author

@kentcdodds (or anyone else) do you ever test arrow key functionality w/ RTL at all?

@kentcdodds
Copy link
Member

I do with downshift using Cypress

@kentcdodds
Copy link
Member

Actually I think we do with jest too. It's been a few years since I can't remember 😅

@benmonro
Copy link
Member Author

Jest?! If you happen to remember how I'd love to know. 🙌🏻😃

@kentcdodds
Copy link
Member

@benmonro
Copy link
Member Author

Awesome thanks!

@smeijer
Copy link
Member

smeijer commented Apr 10, 2020

Do you think it should be?

Support for key presses would be very useful. Think of typing 'hi' in a textarea, and using ctrl + enter to submit the form.

Or testing if hotkeys still work.

@kentcdodds
Copy link
Member

We should be able to implement this relatively easily now that we have modifier support implemented. You'd put it somewhere around here:

'{enter}': async ({eventOverrides}) => {

@nickmccurdy nickmccurdy self-assigned this Jun 9, 2020
@nickmccurdy nickmccurdy transferred this issue from testing-library/user-event Jun 14, 2020
@nickmccurdy nickmccurdy transferred this issue from testing-library/dom-testing-library Jun 16, 2020
@nickmccurdy nickmccurdy added the enhancement New feature or request label Jun 16, 2020
@nickmccurdy nickmccurdy assigned juanca and unassigned nickmccurdy Jun 22, 2020
@brandonpittman
Copy link

Just found myself looking for this feature too.

kentcdodds pushed a commit that referenced this issue Nov 3, 2020
* feat(type): Implement cursor navigation with ArrowLeft and ArrowRight

* refactor(navigation-key): use a Number instead to hit all the lines

* test(type): simplify snapshot

* style(type): remove whitespace

Co-authored-by: Jesu Castillo <castillojesuj@gmail.com>

Closes #354
@testing-library-bot
Copy link

🎉 This issue has been resolved in version 12.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request released
Projects
None yet
9 participants