Search code examples
comboboxvaadin

Vaadin: How to set a partial value in the input field of a Combobox and trigger the popup to open?

Vaadin V24, Java.

I'd like to programmatically set the text of a ComboBox (partial input) that's being used as a search field and then trigger it to do the search. This would be just as if the user was typing it themselves. I'm pretty sure there is no way to do this from the server-side.

My thought is something like this, where I set the value on the <vaadin-combo-box> and then trigger a key press event:

ComboBox<PojoClassHere> searchBox = new ComboBox<>();
...later in code...
searchBox.getElement().executeJs("this.setAttribute('value', '" + textValueToInsert + "'); this.dispatchEvent(new Event('input', { bubbles: true, cancelable: true}));");

But that doesn't seem to do anything.

According to this page, https://cdn.vaadin.com/vaadin-web-components/24.2.1/#/elements/vaadin-combo-box, you can set the value on the <vaadin-combo-box> and it will propagate to internal components. The key press event, I would think, would trigger it to do the search and dropdown the list.

Solution

  • This is not a common use case, thus there is no Java API for it. But this can be achieved by the following JavaScript call

    comboBox.getElement().executeJs("""
    this.inputElement.value='Au';
    this.inputElement.dispatchEvent(new Event('input', { bubbles: true, cancellable: true}));
""");

    Which will produce the following result in a ComboBox having list of country names:

    enter image description here