Combobox async options#831
Open
NoelDeMartin wants to merge 8 commits into
Open
Conversation
NoelDeMartin
force-pushed
the
improvements
branch
2 times, most recently
from
36b52a1 to
f234b5d
Compare
Prompt: I just implemented async options management, and I realized we have a problem with options where the value and label is different. In the options list, they display properly, but when you select an option, what ends up in the input is the value, not the label; which is confusing from a UX perspective. Can we fix that? AI work summary: - Introduced a new state variable `displayValue` to manage the displayed value in the input. - Updated the `onValueChanged` handler to set `displayValue` based on user input. - Modified `selectOption` method to accept a `ComboboxOptionData` object and update `displayValue` accordingly. - Ensured `displayValue` is initialized with the current value when the component updates. Co-Authored-By: Cursor <cursoragent@cursor.com>
This will reduce unnecessary network requests
…vent in Combobox
NoelDeMartin
force-pushed
the
improvements
branch
from
f234b5d to
192fc7a
Compare
NoelDeMartin
force-pushed
the
improvements
branch
from
192fc7a to
8d655b1
Compare
The previous implementation was a bit clunky with the autocomplete and default options list after opening with async options. It also split the concern for watching value changes in two parts (onValueChanged vs willUpdate). This implementation should be more reliable and it also adds some new functionality like fallback options, a selectedOption getter, the "change" event, etc.
- Add `options` getter and setter - Add default option - Implement `change` event
NoelDeMartin
force-pushed
the
improvements
branch
from
8d655b1 to
68edc15
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
This PR extends the solid-ui-combobox to support asynchronously loaded options (via URL templates or a JS provider) and updates the solid-ui-select API to support providing options programmatically while maintaining backward compatibility with DOM-provided <solid-ui-*-option> children.
Changes:
- Add a small
debounce()utility and use it to debounce async combobox filtering. - Add async options support to Combobox (provider + URL-based fetching) and update rendering to support non-selectable / templated options.
- Update Select to accept an
optionsarray and dispatch change details, while still supporting DOM child options.
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/lib/timing.ts | Adds debounce() helper used for async combobox filtering. |
| src/lib/components/traits/InputTrait.ts | Broadens value handling to unknown and stringifies form values. |
| src/components/select/Select.ts | Adds programmatic options API and change-event detail; keeps DOM fallback. |
| src/components/select/index.ts | Re-exports Select module types/symbols. |
| src/components/combobox/index.ts | Re-exports Combobox module types/symbols. |
| src/components/combobox/Combobox.ts | Implements async options support, debounced filtering, and richer option rendering. |
| src/components/combobox/Combobox.styles.css | Styles loading/error/info rows for async options. |
| src/components/combobox/Combobox.stories.ts | Adds Storybook examples for async options (JS provider + URL). |
| package.json | Bumps version and adds @lit/task dependency. |
| package-lock.json | Locks @lit/task dependency and bumps version. |
Comments suppressed due to low confidence (1)
src/components/select/Select.ts:93
<select>.valueis always a string, but option values are typed asunknown. Without normalizing,?selectedcan be wrong (e.g. option value1vs current value'1'). Normalizing to strings here aligns DOM selection with the component’s stringvalue.
html`<option
.value=${option.value}
?selected=${option.value === this.value}
>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+10
to
+17
| let timeout: unknown | ||
|
|
||
| const debouncedCallback: DebouncedFunction<Args> = (...args: Args) => { | ||
| debouncedCallback.cancel() | ||
| timeout = setTimeout(() => callback(...args), delay) | ||
| } | ||
|
|
||
| debouncedCallback.cancel = () => clearTimeout(timeout as number) |
|
|
||
| firstUpdated () { | ||
| this.config.getInternals().setFormValue(this.target.value) | ||
| this.config.getInternals().setFormValue(String(this.target.value)) |
Comment on lines
+64
to
68
| setValue (value: unknown) { | ||
| this.target.value = value | ||
|
|
||
| this.config.getInternals().setFormValue(this.target.value) | ||
| this.config.getInternals().setFormValue(String(this.target.value)) | ||
| this.target.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true })) |
Comment on lines
+49
to
+52
| return Array.from(options).map((option) => ({ | ||
| value: option.value, | ||
| label: option.textContent, | ||
| })) |
Comment on lines
+103
to
+107
| private onChange () { | ||
| const value = this.inputElement?.value | ||
| const option = this.options.find((option) => option.value === value) | ||
|
|
||
| return Array.from(options).map((option) => ({ | ||
| value: option.value, | ||
| label: option.textContent, | ||
| })) | ||
| this.inputTrait.setValue(value) |
Comment on lines
+326
to
+342
| const response = await fetch( | ||
| this.asyncOptionsUrl.replace('%search%', filter) | ||
| ) | ||
| const data = await response.json() | ||
| const results = Array.from( | ||
| this.asyncOptionsResultsField | ||
| ? data[this.asyncOptionsResultsField] | ||
| : data | ||
| ) | ||
|
|
||
| if (results.length === 0) { | ||
| throw new AsyncOptionsInfo('No results found') | ||
| } | ||
|
|
||
| const labelField = this.asyncOptionsLabelField ?? 'label' | ||
| const valueField = this.asyncOptionsValueField ?? 'value' | ||
|
|
Comment on lines
+73
to
+75
| const defaultOption = this.options.some(option => !option.value) | ||
| ? nothing | ||
| : html`<option disabled value="" ?selected=${!this.value}>Select an option</option>` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR improves the Combobox in a couple of ways, and it implements new features to support loading options asynchronously. I'm not 100% convinced about the naming, though, so suggestions are welcome.
It also improves the Select component to be backwards compatible with the previous API.