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

Enter key does not open menu while focused #3414

Closed
GonchuB opened this issue Feb 7, 2019 · 7 comments
Closed

Enter key does not open menu while focused #3414

GonchuB opened this issue Feb 7, 2019 · 7 comments

Comments

@GonchuB
Copy link

GonchuB commented Feb 7, 2019

The menu is not opened when ENTER key is pressed and the menu is closed. From the source (onKeyDown), it looks like the first option should be focused, but nothing happens

Steps to reproduce

Expected result

  • Menu gets opened

Actual result

  • Nothing happens
@gwyneplaine
Copy link
Collaborator

This is definitely not intended, focusOption should not be called on ENTER if the menu is not open.
Fix for this will be released in v2.4.0 as part of #3427.

@gwyneplaine
Copy link
Collaborator

resolved in v2.4.0 and closed

@Veena624
Copy link

Veena624 commented Feb 24, 2020

This is my workaround:

Example Link: https://codesandbox.io/s/boring-pike-v9ohq?fontsize=14&hidenavigation=1&theme=dark

onKeyDown = (event) => {switch (event.key) {
case 'Enter':
if (!this.state.isOpen) {
this.selectRef.setState({
menuIsOpen: true,
});
break;
}
}
};

<Select ref={el => (this.selectRef = el)} onKeyDown={this.onKeyDown} />

@fkrauthan
Copy link

I guess this issue is back? At least for me if a Dropdown is focused (ether through tab or through a form label for connected to the input) the menu does not open when pressing enter.

@lgoldb
Copy link

lgoldb commented Jun 19, 2023

Is this issue back? My team is noticing it with react-select 5.2.2. Can we re-open it?

@Rall3n
Copy link
Collaborator

Rall3n commented Jun 20, 2023

@lgoldb This was never an issue. Enter is not meant to open the dropdown, only to select an option if the dropdown has been opened.

But you can implement this behaviour by yourself using the onKeyDown prop (see #3414 (comment) for possible implementation).

@IanBoyte
Copy link

IanBoyte commented Oct 18, 2024

@lgoldb This was never an issue. Enter is not meant to open the dropdown, only to select an option if the dropdown has been opened.

But you can implement this behaviour by yourself using the onKeyDown prop (see #3414 (comment) for possible implementation).

For reference, this might need to be reconsidered. Our third party accessibility audit is requesting that the dropdown be expanded on both spacebar and enter pressed on focus. They referenced the following W3 documentation: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants