fix: Autocomplete reset/re-render on keyboard events #3068
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this PR do?
Context
Please see #2993 (comment)
Originally I had to nest
ListboxComponent
this withinSelectMultiple
in order to access functions related to the state of the popper.What I think is happening is that selecting an item with they keyboard was causing a re-render of the popper and effectively resetting the view to the top of the list.
I've actually removed these here as currently clicking "Done" counts as a clickaway as it's outside of the scope of the popper (
ref
andprops
are applied to therole="listbox"
child element withinListboxComponent
). This actually in effect matches the current behaviour -Before
After selecting an item, the focus shifts back to the first item
https://github.com/theopensystemslab/planx-new/assets/20502206/9f960cbf-6ff0-4007-a0fb-8597fe68f8ef
After
After selecting an item, the focus remains in place
https://github.com/theopensystemslab/planx-new/assets/20502206/6e890a66-cf08-4b43-96c4-b6bc0e78a03c