Update searchable select to make Home and End keys work correctly - if dropdown menu is collapsed
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
### Summary
When a user is focused on a searchable select and its dropdown menu is collapsed, pressing the Home and End keys should move the cursor to the start or end of the inputted text (instead of opening the dropdown menu and focussing the first or last options).
### 💬 Description
If I go to a [searchable select](https://mi6.github.io/ic-ui-kit/branches/develop/web-components/?path=/story/web-components-select-searchable--default), type in some characters (e.g. "ca"), press Escape to close the dropdown menu, and then press the Home or End key, the dropdown menu gets re-opened and the first or last option is focused.
While I believe this focussing of the first or last option is correct _when the dropdown menu is already open_, I think it should instead move the cursor in the input box _if the dropdown menu is collapsed_. This is because a collapsed searchable select is essentially just an ``, so it should take on the normal text editing behaviour, e.g. see this [HTML input example](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_test). The focussing on the options should only happen if the dropdown menu is already open.
This is kind of related to a [comment I've put about the search bar component](https://github.com/mi6/ic-ui-kit/issues/2836#issuecomment-4327484992). Implementing this change will make the searchable select behaviour align with the search bar behaviour.
### 💰 Use value
This will make the searchable select behaviour match the behaviour that users are most familiar with, i.e. the text editing behaviour of an HTML ``.
It will also bring the behaviour in line with the behaviour of the search bar component.
### 📝 Acceptance Criteria
Given that my focus is on a searchable select and I have typed in some characters,
When I press the Escape key to close the dropdown menu, and then press the Home key,
Then my focus should move the start of the inputted text.
Given that my focus is on a searchable select and I have typed in some characters,
When I press the Escape key to close the dropdown menu, and then press the End key,
Then my focus should move the end of the inputted text.
(Pressing the Home or End key should not open the dropdown menu at all if it is collapsed)
### ✏ Designs
_No response_
### 🧾 Guidance
_No response_
### 🚨 Urgency (low, medium or high)
Medium
### Additional info
Put medium urgency; even though it's accessibility-related, users can just use the left and right arrow keys to move through the text in the input box in the meantime.
Contributor guide
Research direction
Begin with the searchable select component linked in the issue and trace its keyboard handling for Home, End, and Escape. Compare the collapsed-state behavior with the search bar component referenced in issue #2836. Done means Home and End move the input cursor when the menu is closed, while preserving option focus behavior when it is open, with the acceptance scenarios covered.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100