SearchAutocomplete issues

[reidbarber]

🐛 Bug Report

List of issues:

• On mobile with isQuiet, the search icon placement within the input is wrong.
• On mobile with isDisabled, the search icon is too dark (doesn't look disabled). Compare to SearchField disabled.
• On mobile, the validation icon and clear icon are in different orders on the input and the tray.
• Pressing 'Esc' key while typing on mobile closes and re-opens tray. Should behave like ComboBox.
• Inputs on stories for size-3000 and size-6000 appear to be the same width.
• On the size-500 story, selecting a value like "Mechanical" shows the value overflowing outside of the input
• On mobile, the clear button is visible when the field is empty and validationState is set.
• Remove any checkmarks from listbox (should we clear selection immediately?)
• Add support for help text SearchAutocomplete: add help text support #4327
• Clear selected item if searchfield is cleared (SearchAutocomplete: fix to clear selected item if searchfield is cleared #4001)
• onKeyDown event on the SearchAutocomplete component is getting fired twice. onKeyDown event on the SearchAutocomplete component is getting fired twice. #3684
• need support for custom data attributes SearchAutocomplete: support custom data attributes #4251
• validation icon and clear icon order should match searchfield
• On Mobile, value should be vertically centered.
• When the validationState is invalid and showing an errorMessage , the error is not read by the screen reader. (VoiceOver / NVDA)

Stories

• The isReadOnly story needs a defaultValue or value to check that we can select the value or not.
• Valid story has invalid styles
• Add a long value story to see how it overlaps with the validation and clear icons.

Docs

• Use svg graphic in docs (Source)
• Add custom onSubmit example (Source)

Other Questions

• Should SearchAutocomplete ever be required, or have validation? (Source)
• Are inputValue/defaultInputValue/onInputChange necessary since SearchFieldProps already has value/defaultValue/onChange (Source)
• Review 'ESC' behavior with onInputChange (Source)
• Check if key should be passed to onSubmit in examples (Source)
• Review 'Enter' on controlled example after making selection (Source)
• Should it include onSelectionChange even if it doesn't have the idea of selected keys?

From 03/20/23 Testing session

• Scrolling detaches the popover from the field. Assuming the input has a fixed position while the popover is in the page. (KT) - We want to close on scroll for combobox. And for docs search we want position fixed.

• The tray has extra scroll height, doesn't seem to be adjusting itself accordingly when the virtual keyboard appears (DL)

• The validation example renders the checkbox and close icons on top of each other.

• Docs updates, should readonly example have a selected value? The menu direction top should be higher up so it can have enough space to open down and we can also open it at the top of the page where it will flip. (KT)

• In docs, do a search and click on a result with a lot of text. Navigate back and the text will overflow the field.

🧢 Your Company/Team

RSP

🕷 Tracking Issue (optional)