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.
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
emyarod
force-pushed
the
8179-prevent-invalid-option-retention
branch
from
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) |
emyarod
force-pushed
the
8179-prevent-invalid-option-retention
branch
from
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.
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 👍🏻 ✅
emyarod
added
status: ready to merge 🎉
and removed
status: one more review 👀
status: ready for review 👀
labels
|
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)