[select] Dropdown closes immediately when component is opened programmatically

[vursen]

Description

When opening the select component using the opened property or attribute, the dropdown opens and immediately closes:

Screen.Recording.2024-12-25.at.10.37.09.mov

Expected outcome

It should be possible to control the select's opened state with the opened property or attribute.

Minimal reproducible example

<script type="module">
  import '@vaadin/select';
</script>

<vaadin-select></vaadin-select>

<script>
  const select = document.querySelector('vaadin-select');
  select.items = [
    { label: 'Option 1', value: 'option-1' },
    { label: 'Option 2', value: 'option-2' },
  ];
  select.opened = true;
</script>

Environment

Vaadin version(s): 24.7 and earlier
OS: Mac OS

Browsers

Issue is not browser related

[web-padawan]

This seems to be caused by the logic which sets opened back to false when the _overlayElement it not defined yet:

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

Lines 369 to 372 in c90066f

	if (!this._overlayElement || !this._menuElement || !this.focusElement || this.disabled || this.readonly) {
	this.opened = false;
	return;
	}

We probably should update the observer to use something like _openedChanged(opened, _overlayElement) instead - this is how the initial implementation was working.

IMO setting opened to false with readonly or disabled is rather confusing, other overlay based components don't behave this way, they simply shouldn't open in this case. So we probably should refactor the observer.