Select: the width of the selection box is no longer limited (v14/v23)

[pellmann]

In v14, the width of the select box was always at most the width of the select component. In v23, the width grows to the full width of the window.

It would be nice to get the old behavior back - although the new one might also be useful.

v14:

v23:

[vursen]

I checked out the Select component in V14 and it appears to work exactly the same way as in V23, filling the whole available width:

Screen.Recording.2022-03-18.at.10.55.55.mov

https://vaadin.com/docs/v14/example?embed=select-basic-wc.js&import=component/select/select-basic.ts

@pellmann Could you please clarify which version exactly we are talking about? And also a reproduction example would be helpful.

[web-padawan]

Just to clarify, is this the default Select component or there are any custom styles? A code example would help indeed.

[pellmann]

@web-padawan - yes it is a default select. @vursen - I think what is the difference is that it filled the space to the right also in v14 but not the space to the left. In your example the select has no space to the left to fill.

[vursen]

I would say that it is not about some width limitation that worked in v14 and doesn't work in v23. It is rather a difference in how the select dropdown content fills the available space.

v14

The content always fills the space to the right edge of the screen regardless of whether there is enough space to fit the content or not.

Screen.Recording.2022-04-07.at.15.17.46.mov

v23

The content fills the space depending on how much space is available on both sides. If there is more space on the right side, it fills the space to the right edge, otherwise to the left edge.

Screen.Recording.2022-04-07.at.15.38.19.mov

The behavior of v23 seems to be more correct to me. The only question I would have is, shouldn't the dropdown be limited in width in some reasonable way? That could be discussed.

@pellmann Please, confirm that a width limitation is what you would like to gain from this ticket and we will treat the ticket as an enhancement.

[pellmann]

@vursen - my problem was a little different because it always uses the full width space on me. But that may be due to the specific renderer.

Basically I confirm that I want to have a limitation in the width.

[vursen]

Privately agreed to follow the same approach as we use for ComboBox today:

• Limit the select dropdown width to the select input width by default.
• Allow customizing the width with a --vaadin-select-overlay-width CSS property by analogy to --vaadin-combo-box-overlay-width.

Here is a related logic in ComboBox:

web-components/packages/combo-box/src/vaadin-combo-box-overlay.js

Lines 13 to 15 in 2e5a63a

	#overlay {
	width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
	}

web-components/packages/combo-box/src/vaadin-combo-box-dropdown.js

Lines 284 to 301 in 2e5a63a

	_setOverlayWidth() {
	if (!this.positionTarget) {
	return;
	}
	const inputWidth = this.positionTarget.clientWidth + 'px';
	const propPrefix = `${this.__hostTagName}-overlay`;
	const customWidth = getComputedStyle(this).getPropertyValue(`--${propPrefix}-width`);
	this.$.overlay.style.setProperty(`--_${propPrefix}-default-width`, inputWidth);
	if (customWidth === '') {
	this.$.overlay.style.removeProperty(`--${propPrefix}-width`);
	} else {
	this.$.overlay.style.setProperty(`--${propPrefix}-width`, customWidth);
	}
	this.$.overlay._updatePosition();
	}