[combobox][select] Add placeholder prop to Value part
#3604
Conversation
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
atomiks
added
component: select
commit: |
Bundle size report
Check out the code infra dashboard for more information about this PR. |
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
atomiks
force-pushed
the
feat/combobox-select-placeholder
branch
from
b95e935 to
ee223c0
Compare
atomiks
force-pushed
the
feat/combobox-select-placeholder
branch
2 times, most recently
from
c8029dd to
5e4fa02
Compare
mnajdova
reviewed
Dec 24, 2025
Member
mnajdova
left a comment
mnajdova
left a comment
There was a problem hiding this comment.
Logic looks good, left few comments/questions to be resolved before merging.
| <Combobox.Positioner> | ||
| <Combobox.Popup> | ||
| <Combobox.List> | ||
| <Combobox.Item value={null}>None</Combobox.Item> |
Member
There was a problem hiding this comment.
Is this even valid? I mean having items array that difference than the Combobox Items rendered?
Contributor
Author
There was a problem hiding this comment.
Technically yes, this pattern is currently half-broken but is specified throughout the tests. This PR gives it full support: #3594
| const items = useStore(store, selectors.items); | ||
| const itemToStringLabel = useStore(store, selectors.itemToStringLabel); | ||
| const serializedValue = useStore(store, selectors.serializedValue); | ||
| const hasSelectedValue = useStore(store, selectors.hasSelectedValue); |
Member
There was a problem hiding this comment.
There is a lot of repetition here and in the combobox, does it makes sense to extract this in a usePlaceholder hook, or is it too much of an abstraction considering we use different stores? 😕
Contributor
Author
There was a problem hiding this comment.
I think "rule of three" for DRY works here and this is only 2 separate places
atomiks
force-pushed
the
feat/combobox-select-placeholder
branch
3 times, most recently
from
c62352e to
b0baa48
Compare
1 task
atomiks
force-pushed
the
feat/combobox-select-placeholder
branch
4 times, most recently
from
d017b70 to
951c7ab
Compare
github-actions
bot
added
the
PR: out-of-date
atomiks
force-pushed
the
feat/combobox-select-placeholder
branch
from
951c7ab to
ebf30a7
Compare
github-actions
bot
removed
the
PR: out-of-date
mnajdova
approved these changes
Jan 12, 2026
atomiks
force-pushed
the
feat/combobox-select-placeholder
branch
3 times, most recently
from
6b426fd to
0c14c90
Compare
atomiks
force-pushed
the
feat/combobox-select-placeholder
branch
from
0c14c90 to
b0470ed
Compare
atomiks
added a commit
to atomiks/base-ui
that referenced
this pull request
Jan 14, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
When a
nullitem isn't rendered in the list,placeholderacts as a typical placeholder, though it cannot be cleared.Issues when trying to use a native
<label>, which prompted the demos to useField:<label>opens the popup, but this doesn't match native<select>behavior. Trying to workaround this is quite expensive and heavy-handed. On the other hand,<Field.Label>links to the hidden input and only gives focus to the trigger and matches native behavior..Trigger:hover, which unlike Checkbox/Radio, doesn't really look or feel right.<Field.Label>also avoids this.Select: https://deploy-preview-3604--base-ui.netlify.app/react/components/select
Combobox: https://deploy-preview-3604--base-ui.netlify.app/react/components/combobox#input-inside-popup
Closes #3720