vaadin / vaadin/web-components

ComboBox: set empty value if no match on filter

Open
#11,636 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement vaadin-combo-box vaadin-multi-select-combo-box
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.