Skip to content

SearchAutocomplete: fix to clear selected item if searchfield is cleared#4001

Closed
reidbarber wants to merge 4 commits into
mainfrom
searchautocomplete-clear-selected
Closed

SearchAutocomplete: fix to clear selected item if searchfield is cleared#4001
reidbarber wants to merge 4 commits into
mainfrom
searchautocomplete-clear-selected

Conversation

@reidbarber
Copy link
Copy Markdown
Member

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

  1. Type and select an item from the dropdown
  2. Press Escape to clear the field

The searchfield should now clear.

🧢 Your Project:

@reidbarber reidbarber added the small review Easy to review PR label Feb 2, 2023
@rspbot
Copy link
Copy Markdown

rspbot commented Feb 2, 2023

Comment thread packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js Outdated
@rspbot
Copy link
Copy Markdown

rspbot commented Feb 2, 2023

@rspbot
Copy link
Copy Markdown

rspbot commented Feb 3, 2023

@rspbot
Copy link
Copy Markdown

rspbot commented Feb 3, 2023

## API Changes

unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }

@reidbarber reidbarber changed the title SearchAutocomplete: fix to clear selected item if searchrfield is cleared SearchAutocomplete: fix to clear selected item if searchfield is cleared Feb 3, 2023
autoComplete: 'off',
onClear: () => {
state.setInputValue('');
state.selectionManager.setSelectedKeys(new Set());
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noticed that onInputChange is being called multiple times with different values when using the Esc key:
image

This seems to be because of useComboBox's Esc key handling which calls state.revert. Even if we clear the selected key here, that state update doesn't happen yet for state.revert which will cause the second onInputChange call. Ideally we'd drop the Esc key handling from useComboBox but keep the rest of it.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good catch, we should get a test for this as well

@reidbarber reidbarber removed the small review Easy to review PR label Feb 7, 2023
@reidbarber
Copy link
Copy Markdown
Member Author

Closing for now, added to #2286

@reidbarber reidbarber closed this Mar 6, 2023
@reidbarber reidbarber deleted the searchautocomplete-clear-selected branch January 16, 2026 18:16
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

Successfully merging this pull request may close these issues.

4 participants