Clicking disabled options in an ic-select causes double focus indicator
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
### Summary of the bug
When you click on disabled options in an ic-select, both the menu and the input box show a focus indicator. Only the input box should show the focus indicator.
### 🪜 How to reproduce
1. Go to the [select with disabled options story](https://mi6.github.io/ic-ui-kit/branches/develop/web-components/?path=/story/web-components-select-single--disabled-options) and open the select.
2. Click on the disabled option.
3. See that a focus indicator appears on the menu while there's also one on the input box.
### 📸 Screenshots or code
### 🧐 Expected behaviour
The menu should not show a focus indicator at all.
### Additional info
Check that the fix works for all three select variants.
Make sure the fix does not change the behaviour of the search bar focus indicator (see [search bar with options story](https://mi6.github.io/ic-ui-kit/branches/develop/web-components/?path=/story/web-components-search-bar--with-options), clear the value and type in "ca" to see a disabled option).
Contributor guide
Research direction
Start with the select with disabled options story and reproduce the duplicate focus indicators. Compare all three select variants, then check the search bar with options story to ensure its disabled-option focus behavior is unchanged. Done means only the input shows focus after clicking a disabled select option, while the search bar still behaves as before.
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
- 66/100