Whats the correct way to set the selected value of a dropdown-menu?

Flow
1

We have a dropdown menu:

<vaadin-dropdown-menu id="products" theme="light" on-value-changed="productsChanged" placeholder="Product A">

And we have the following properties:

static get properties() {
    return {
        product: {
            type: String,
            value: '',
            notify: true,
            observer: '_productChanged'
        },
		products: {
            type: Array,
            value() {
                return [
                    {product: 'Product A'},
                    {product: 'Product B'},
                    {product: 'Product C'},
                    {product: 'Product D'}
                ];
            }
        }
    };
}

As you can see we are having an observer for the _productChanged. It looks like that:

_productChanged(newValue, oldValue) {
    console.log("from: " + oldValue + " - to: " + newValue + " - in product");

    this.$.products.value = newValue;
}

So here im setting the value of the products dropdown-menu to the newValue.
I do that in the java code using

this.getModel().setProduct("Product C");

The observer is called, I see the log:

from: Product A - to: Product C in product

But the view is never changing. Product A is showing no matter what I do. How can I set the displayed selected value on a vaadin-dropdown-menu?

2

Update on that: I found out that the value is set correctly but the observer function
is not triggered. What could be the reason that the value is set correctly but the event
is not firing?

3

May be silly, but did you check for any typo in the function name?

4

No. Because actually it works under some conditions. When we initialize our view we are also doing the

private void init() {
    this.getModel().setProduct("Product A");
	...
}

And the value is set on the model and also on the real html component and this is triggering the observer correctly.
But when we do it to react on a event like here for example:

this.emitterProcessor.filter(event -> event instanceof ProductChangedEvent).subscribe(event -> {
	log.info("new event");

	this.getUI().ifPresent(ui -> ui.access(() -> {
		log.info("access UI");
		
		this.getModel().setProduct("Product C");

		log.info("new product: " + this.getModel().getProduct();
	}));
});

The output is:

new event
access UI
new product: Product C

The value is set on our model but not on our actual html component (we checked that by adding a simple clicklistener which just prints out our value set to the console), so the observer is not firing.

5

I really have no idea why but doing this:

	@Synchronize(
           property = "product",
           value = {"product-changed"}
	)
	protected String getProduct() {
		return this.getElement().getProperty("product");
	}

fixes the problem.