MDL-78885 comboboxsearch: Improve user search and keyboard handling

- Prevent rerendering of the menu when it's already open to preserve the
  selected/highlighted option.
- Allow ArrowUp and ArrowDown to trigger the user search dropdown for
  improved keyboard navigation.

This commit ensures that the menu is not re-rendered when it's already
open, preserving the selected option to enhance the user experience.
Additionally, ArrowUp and ArrowDown keys now trigger the dropdown,
improving keyboard navigation and user interactions.
This commit is contained in:
Shamim Rezaie 2023-11-01 02:04:26 +11:00
parent ee5c4f8f99
commit 50eeafeb7d
6 changed files with 19 additions and 5 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -352,7 +352,11 @@ export default class {
this.searchInput.removeAttribute('aria-activedescendant');
}
// User may have accidentally clicked off the dropdown and wants to reopen it.
if (e.target.closest(this.selectors.input) && this.getSearchTerm() !== '') {
if (
this.getSearchTerm() !== ''
&& !this.getHTMLElements().searchDropdown.classList.contains('show')
&& e.target.closest(this.selectors.input)
) {
await this.renderAndShow();
}
}