Initial value for combobox with dataProvider

Hilla
1

How to set the initial value of the vaadin-combo-box component with a lazy dataProvider? What properties should be used? We have tried combinations of item-label-path, item-value-path, item-id-path, selected-item, value…

When setting the object into value, we get the following error:

Warning: unable to determine the label for the provided value. Nothing to display in the text field. This usually happens when setting an initial value before any items are returned from the dataProvider callback. Consider setting selectedItem instead of value

The item displayed is

export interface ICompany {
    companyId: number;
    companyNumber: string;
    companyName: string;
    displayValue?: string;
}

The code uses something like:

<vaadin-combo-box
    item-label-path="displayValue"
    item-value-path="companyId"
    item-id-path="companyId"
    selected-item="${company.companyId}"
    .dataProvider=${this.dataProvider}></vaadin-combo-box>
2

I’ve had some issues with async items in the past (Fusion field binding does not work with async items · Issue #270 · vaadin/hilla · GitHub), but this seems different. I pinged the dev team for some deeper insights

3

selected-item should reference the object, rather than its ID, other than that the snippet looks fine.
Setting value together with a data provider will not display anything in the text field, as the items are only loaded after opening the combo box, so there is no data to generate the label / text field value from. As the warning mentions, selected-item should be used instead together with a data provider.

4

Using

selected-item=${company}

displays

[object Object]

in the field of the combobox instead of using item-label-path pointing to “displayValue”. Using a renderer did not help either

5

Ah, you need to bind to the property specifically: .selectedItem
Here’s a quick demo: https://tinyurl.com/2suymbre

6

Thanks, that’s very helpful! How can I ever know when to use .camelCase and when kebab-case?

7

In general, if you have to provide an object then you must assign it to the property (.camelCase). Attributes (kebab-case) may only contain string values.

8

Getting an [object Object] somewhere is an indication that an object was coerced into a string value due to an attribute assignment.

9

Did you find a workaround?
@marcushellberg I see the ticket from 2021 is still open.

I am thinking about prefetching the item and set it in a temp value (with state).
Would using .selectedItem interfere with the binder?

I have a binder and a data provider:

<vaadin-combo-box
    class="pt-0"
    label="Select existing Entity"
    .dataProvider=${this.entityDataProvider}
    item-value-path=uuid
    item-label-path=name
    clear-button-visible
    ?readonly=${this.readonly}
    ${comboBoxRenderer(this.rendererIuclidEntity, [])}
    ${field(parentBinder.model.existingEntityUuid)}
    >
</vaadin-combo-box>

UPDATE:
it does set the value in the combobox, but does noch check the item in the dropdown when opened.