Directory

← Back

AutoSelectComboBox

ComboBox with autoselect and validation

Author

Rating

Popularity

100+

Description

If there is only one match while typing a custom value in combobox, it selects the matched value in blur when either the user hit ENTER or leave focus from the field (clicking any other area outside of combobox).

The default behaviour of combobox is that when leaving the focus, it clears the value however with AutoSelectComboBox the value stay as it is and it can show a custom error massage if there is no exactly one match with the input.

Compatibility

  • Version 1.x.x -> Vaadin 14+
  • Version 2.x.x -> Vaadin 23.1.x
  • Version 3.x.x -> Vaadin 23.2.x

Sample code

// begin-source-example
        // source-example-heading: ComboBox with autoselect and validation
        ComboBox<Person> comboBox = new ComboBox<>("People");
        comboBox.setHelperText("Auto select if 1 option. Allow custom values + run validation against options.");
        comboBox.setItemLabelGenerator(Person::toString);
        comboBox.setDataProvider(dataProvider);

        new ComboBoxEnhancer<>(comboBox).enableAutoSelect(buildEmptyPerson(), (displayValue, emptyValue) -> {
            emptyValue.setFirstName(displayValue);
            return emptyValue;
        }, filter -> personService.fetch(0, Integer.MAX_VALUE, filter).stream());
AutoSelectComboBox<Person> asComboBox = new AutoSelectComboBox<>("Another People");
        asComboBox.setHelperText("Custom Web Component. Auto select if 1 option. Allow custom values + run validation against options.");
        asComboBox.setDataProvider(dataProvider);
        asComboBox.setItemLabelGenerator(Person::toString);

        Binder<TestBean> binder = new Binder<>();
        binder.forField(comboBox)
                .asRequired(Validator.from(personService::exists, "Please select one of the available values"))
                .bind(TestBean::getPerson, TestBean::setPerson);

        TestBean item = new TestBean();
        binder.setBean(item);
        // end-source-example

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Update to Vaadin 23.4.0 and Vaadin 24

Released
2024-03-12
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 23
Vaadin 24
Vaadin 14 in 1.0.0
Browser
N/A

AutoSelectComboBox - Vaadin Add-on Directory

ComboBox with autoselect and validation AutoSelectComboBox - Vaadin Add-on Directory
#### Description If there is only one match while typing a custom value in combobox, it selects the matched value in blur when either the user hit ENTER or leave focus from the field (clicking any other area outside of combobox). The default behaviour of combobox is that when leaving the focus, it clears the value however with AutoSelectComboBox the value stay as it is and it can show a custom error massage if there is no exactly one match with the input. #### Compatibility * Version 1.x.x -> Vaadin 14+ * Version 2.x.x -> Vaadin 23.1.x * Version 3.x.x -> Vaadin 23.2.x
Online