-
Notifications
You must be signed in to change notification settings - Fork 1.8k
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
fix(ComboBox): prevent invalid option retention on Enter
#8476
fix(ComboBox): prevent invalid option retention on Enter
#8476
Conversation
Deploy preview for carbon-elements ready! Built with commit 9c3329a |
Deploy preview for carbon-components-react ready! Built without sensitive environment variables with commit 9c3329a https://deploy-preview-8476--carbon-components-react.netlify.app |
I can see why #3861 was closed, since that one gets a bit more complicated with multiselect/open/close on enter, but I think having an event listener for enter on combo box is fine since you're only selecting one item. That being said, when I tested the component, I realized enter only opens the menu box if there is no item already selected. If I've selected an item and the menu is closed, then I press enter to try to open again, it doesn't open. Is that expected? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like it's mostly working. When I was testing, I noticed that if I selected an item, then tried to select an invalid item (xxx
) and pressed enter, it didn't close. Great! But then if I deleted the xxx
and closed the menu, the original selected item text was no longer displaying even though it shows as still selected when the menu is open. See video attached.
Screen.Recording.2021-04-23.at.7.58.37.AM.mov
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
also seeing Josefina's comment / bug :/
7003a07
to
e30dbd2
Compare
@jnm2377 @andreancardona this does not appear to be a regression, unless I am misunderstanding you. can you clarify what the expected behavior should be and what the existing behavior is WRT #8170? I can address it separately but it doesn't seem to be related to the issue and is not a regression from this PR |
regarding this question, yes this is expected as Enter typically does not expand a combobox (ref https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html) |
e30dbd2
to
a409c86
Compare
@emyarod you're right. After testing the current component, it seems that the bug already exists. I can open an issue for it. Screen.Recording.2021-04-29.at.3.09.40.PM.mov |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think just ensuring enter does not close the menu with an invalid option is enough for this PR. I think if we want to change how the list-box menus are opened/closed via keyboard (Enter vs space vs down arrow) we should track in a separate issue and have a consistent pattern throughout.
This LGTM in reference to the original ticket 👍🏻 ✅
This also closes #6613. |
Closes #8170
Related #2823
Related #3862
This PR prevents an invalid option from remaining in the ComboBox on Enter keypress while retaining the functionality introduced in #3862 in response to #2823 (Enter expands the closed ComboBox menu). Alternatively, we may be able to remove the Enter key menu expansion due to this issue being closed as a wontfix #3861), but curious to hear others' thoughts on this
Testing / Reviewing
perform the test described in the referenced issue and confirm that pressing Enter when an invalid value is in the input field does not close the menu while retaining the previous selection (if one was made)