Initial value for combobox with dataProvider

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>

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

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.

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

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

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

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.

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