vaadin / vaadin/web-components
ComboBox: set empty value if no match on filter
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 582
- Forks
- 102
- Avg merge
- 13h 31m
- Merged PRs (30d)
- 278
Description
Describe your motivation
Currently, if the text typed into the ComboBox doesn't match any item, the field automatically reverts to its previous value on enter/blur.
This can cause issues if the user doesn't notice the non-match, and thus does not notice that the ComboBox still has its previous value.
In many cases, it would be better if the ComboBox set itself to the empty value, so that a required validation on the field would catch it.
Describe the solution you'd like
An API for toggling the non-match behavior between
- Revert to previous value
- Fall back to empty value
The Flow API could be something along the lines of
ComboBox::setNoMatchBehavior(NoMatchBehavior) where NoMatchBehavior is an enum of REVERT and EMPTY.
The WC/React API could be a corresponding noMatchBehavior property of revert and empty.
Alternatively, a boolean could probably be sufficiently descriptive: setEmptyOnNoMatch(true) and emptyOnNoMatch respectively.
Ideally, we would provide a global switch for this in Flow through a static setter like
ComboBox.setNoMatchBehavior(NoMatchBehavior)
This API should also be available in MultiSelectComboBox.
Describe alternatives you've considered
The desired behavior, as described above, might actually be a better default, but changing it now would be a breaking change.
We could consider changing the default in V26.0.
Additional context
In combination with allowCustomValues, the CustomValueSetListener can be used to achieve the desired behavior. The proposed API would have no effect when used in combination with allowCustomValues.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the ComboBox and MultiSelectComboBox entry points and review their Flow, WC, and React APIs, including how allowCustomValues and CustomValueSetListener affect no-match behavior. Define the revert-versus-empty API, including the proposed global Flow switch, and verify that both components produce an empty value when configured without affecting custom values.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100