mi6 / mi6/ic-ui-kit

Update searchable select to make Home and End keys work correctly - if dropdown menu is collapsed

Open
#4,448 0 comments 0 reactions 0 assignees View on GitHub
a11y select component
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.