fix: handle list-box set before renderer

[web-padawan]

Description

Fixes vaadin/flow-components#2553

The way how Flow component works is not fully clear to me: for some reason, the original issue only manifests in Safari but not Chrome, and only on reattach. Finally, there has to be some other component present (see also #428).

However, I was able to reproduce the root cause with a test case that roughly mimics Flow connector:

1. Create a list-box element and append it as a child in the constructor,
2. In renderer function, move the list-box child to root element.

The actual problem: if menuElement.items is already defined by the time we initialize it, there will be no items-changed event fired. As a result, this._items will remain undefined and the subsequent renderer call will throw an error here:

web-components/packages/select/src/vaadin-select.js

Line 631 in 87bbb0e

const selected = this._items[this._menuElement.selected];

Type of change

• Bugfix

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[tomivirkki]

I wasn't able to reproduce the original issue with Safari 15.2. But the fix is valid nonetheless, lgtm.

[vaadin-bot]

Hi @web-padawan , this commit cannot be picked to 22.0 by this bot, can you take a look and pick it manually?
Error Message: Error: Command failed: git cherry-pick c81899b
error: could not apply c81899b... fix: handle list-box set before renderer (#3412)
hint: after resolving the conflicts, mark the corrected paths
hint: with 'git add ' or 'git rm '
hint: and commit the result with 'git commit'

[vaadin-bot]

This ticket/PR has been released with platform 23.0.0.beta2 and is also targeting the upcoming stable 23.0.0 version.