[select] Add public API to set no-vertical-overlap on the overlay

[probert94]

Describe your motivation

I recently got the feedback that some users unintentionally change the value of the Select component because the overlay opens above the component and the first value is directly under the cursor:

So a double click in this case would set the value from "Price: low to high" to "Most recent first".

Describe the solution you'd like

After getting this feedback I checked different select components, including chromes native select and material design select box.
Most of them seem to place the overlay below the component, a double click would simply close the overlay without changing the value.

Another solution would be to change the order of the items, so that the selected value is always the top one:

Describe alternatives you've considered

The current workaround as suggested by Vaadin expert chat is to create a subclass of Select and call getElement().executeJs( "this._overlayElement.setAttribute('no-vertical-overlap',true);");

Additional context

No response

[web-padawan]

Thanks for the issue. Moved to web components as it's where it belongs. We might want to add new API for this.

[enver-haase]

Is it right that the getElement().executeJs( "this._overlayElement.setAttribute('no-vertical-overlap',true);"); code, called in the subclass constructor, works -- but only when you open the overlay a second or consecutive time?

[probert94]

@enver-haase I am not using this workaround anymore. I now have a client-side subclass of Select which sets no-vertical-overlap to true inside ready() like this:

ready() {
  super.ready();
  this._overlayElement.setAttribute("no-vertical-overlap", true);
}

[sissbruecker]

Has been resolved with vaadin/flow-components#6379