-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Improve default selection in the Combobox Component #33928
Conversation
Size Change: +28 B (0%) Total Size: 1.03 MB
ℹ️ View Unchanged
|
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.
This is great! Thanks for the fix, tests well and covers all the edge cases I could think of too.
Just one comment about maybe improving the clarity of the code but feel free to take it or leave it.
Hi, @mikejolley Thanks for the fix. This matched behavior described in ARIA 1.1 - https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html#kbd_label_textbox. Can you rebase and force-push the branch? It looks like checks got stuck. |
It seems some are still stalling. Any ideas @Mamaduka ? |
Maybe do another rebase and force push? I tried but cannot cancel and re-run the "Build Release Artifact" job manually. |
* Add combobox control * Implement in country and state * mobile styling * styling across themes * Remove validated select component * Use focus-within * Update tests * Use @wordpress/compose * Move field clearing to effect hook * Patch combobox component PR WordPress/gutenberg#33928 * patch package after install * update package * Prevent autofill handling impacting manual input * Add todo * combo requires option to be selected
Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
@Mamaduka I rebased and now there are fails for other things (PHP side). This isn't me :D |
It looks like Docker failure; I will restart that one. Not sure what's wrong with the "Build Release Artifact" action, though. |
I tried cancelling build release artifact but it says cancelling failed ¯_(ツ)_/¯ |
I used admin privileges to squash merge this given there was no way to cancel the errant GH workflow that had no relevance to the changeset in this pr. |
Description
Filtering the results of the Combobox and pressing the enter key leads to an unexpected selection, ignoring your input. This can be reproduced easily in Storybook:
My fix for this is to use a
useEffect
hook to update the current selection if the list of suggestions is filtered. If the current selection is no longer available, it's updated to the first match automatically. That means if you do hit enter, you're going to select something more relevant to your input than the original selection.Fixes #33920
How has this been tested?
Tested with this patch on a checkout form using the same steps as above.
Screenshots
This is after the fix. I enter the text and hit enter. My selection is preserved.
Types of changes
This is a bug fix.
Checklist: