adobe / adobe/spectrum-web-components

[Feat]: Extend ComboboxOption to support disabled state of menu items

Open
#4,775 0 comments 0 reactions 0 assignees View on GitHub
Component:Combobox Feature
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [X] I agree to follow this project's code of conduct.

### Impacted component(s)

Combobox

### Description of the requested feature

As a user I'd like to disable certain items in a combobox so I can see that those values/items exists, but aren't selectable.

### Mockups or screenshots

Screenshot 2024-09-19 at 18 17 11

### Implementation notes or ideas

Extend Combobox options with boolean param: `disabled` , see: https://github.com/adobe/spectrum-web-components/blob/a2b6bea7142930d8143d9ca887e2c56ffa71a669/packages/combobox/src/Combobox.ts#L45
such as
```
export type ComboboxOption = {
value: string;
itemText: string;
disabled: boolean;
};
```

and map that disabled state to related menu-item. Check if selection process will still work and disabled menu item won't be selected when user presses keyUp/keyDown.

Contributor guide

Open the contributing guide

Research direction

Start in packages/combobox/src/Combobox.ts at the ComboboxOption definition, then trace how options are mapped to related menu items and how keyboard selection handles keyUp/keyDown. Done means options can carry a boolean disabled state, the menu item reflects it, and disabled items are not selected by keyboard or other selection paths.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.