Hint/Placeholder is blank when select allows empty selection

[sergetania]

Description

This has worked in Vaadin 14. Switching to V23, we have noticed this issue..
I create a select component, set a placeholder and allow empty selection. Vaadin blanks the set placeholder if a select allows empty selection. @javier-godoy suggested to set an empty selection caption which is displayed in place of placeholder when nothing is selected. However, it creates a weird UI experience when a "placeholder" becomes a selectable option. The example in Vaadin docs has a select(works because it does not allow empty selection) with "Select Size" placeholder and options "XS", "S",... So with the suggested workaround the user will see the following options in the dropdown list: "Select Size", "XS", "S"... Sorry, it is weird.

Expected outcome

Vaadin not blanking out the placeholder if no empty selection caption is set.

Minimal reproducible example

	Select typeSelect = new Select();
	typeSelect.setPlaceholder( "Filter By Type" );
	typeSelect.setEmptySelectionAllowed( true );
	String[] types = { "One", "Two" };
	typeSelect.setItems( types );

Steps to reproduce

Create a select component using the above code. The combo will not display the set placeholder.

Environment

Vaadin version(s): 23.3.31 - 23.4.0
OS: Windows

Browsers

Chrome

[sergetania]

Sorry, I find it puzzling that this issue needs a design decision. To me, this seems like a very simple issue.

What is the placeholder? It is what is displayed when the field is empty. When is the combo field empty? When nothing is selected and the empty selection caption is not specified (because if it is specified then the field is not empty).

And that is how this used to work in V14. There was no conflict

[web-padawan]

The reason why this was working in V14 is that <vaadin-select> was using <vaadin-text-field> internally and that has native <input> with placeholder property. As for empty selection, the logic for updating value slot didn't insert the item when it doesn't have content (which is the case when empty selection is allowed).

In Vaadin 22 and later, the placeholder is also implemented by using cloned vaadin-select-item and placing it in value slot. Therefore, empty selection item overrides the one that the web component uses for placeholder. In order to show the placeholder when the selected item is empty, we need to update the corresponding block:

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

Lines 515 to 521 in f3a9e07

	if (!selected) {
	if (this.placeholder) {
	const item = this.__createItemElement({ label: this.placeholder });
	this.__appendValueItemElement(item, valueButton);
	valueButton.setAttribute('placeholder', '');
	}
	} else {

[rolfsmeds]

Yup, makes sense.

As for why this needed a design decision, we wanted to check if there was something fundamentally wrong with the field supporting both placeholder and empty-selection-caption, and if that was something we'd need to look into.

But I do think they serve to distinct use cases:

• A placeholder prompts the user to select something
• An empty-selection-caption is for when "none of the above" is a valid selection, which should clearly not be shown as a placeholder, and would be a lot of extra work to include in the dataset bound to the field.

So, let's go ahead and fix this.