adobe / adobe/spectrum-web-components

[Feat]: Combobox's menu should show selected item on initial load

Open
#6,045 2 comments 0 reactions 0 assignees View on GitHub
Component:Combobox triage
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

Currently, there is no simple way on the API to mark a slotted element as selected on initial load even when the textContent on the input and the textContent on the slotted element matches exactly. (I believe this is because the combobox makes its own copy of the options from slotted elements)

I think this would be nice UI/UX to add so that users can see right away that a combobox with pre-filled text already matches an existing option. For example, setting combobox.value should update both the combobox's input value as well as look for matching options in its menu.

### Mockups or screenshots

On initial load, it should look like below:
Image

If the text input doesn't match any of the menu options, then keep existing UI/UX:
Image

### Implementation notes or ideas

_No response_

### Would you like to track this issue in Jira?

- [x] Yes, please tell me the ticket number!

Contributor guide

Open the contributing guide

Research direction

The payload names no implementation file or test; start with the combobox component's value initialization and handling of slotted options. Check how matching options are copied into the menu, then verify that a pre-filled matching value shows the corresponding item selected on initial load while unmatched text keeps the existing behavior.

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
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.