vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
434 stars 82 forks source link

Multi-select-combo-box placeholder attribute active when no placeholder text set #7551

Closed HerbertsVaadin closed 1 month ago

HerbertsVaadin commented 1 month ago

Description

Seems like other text input field types remove the placeholder text attribute, when no placeholder is set, but Multi-select combo box has an empty placeholder attribute (placeholder="") instead. This is causing us issues with styling based on the presence of placeholder attribute.

:host([placeholder]) [part='label'] {
    ...
}

Such selector, when included in components/{component}.css applies successfully to text fields like TextField, ComboBox, when they have placeholder text set, and does not apply when no placeholder text is set. For multi-select-combo-box, it applies always.

Expected outcome

No "placeholder" attribute should be present on component, if no placeholder text is set.

Minimal reproducible example

You can use the first example from Vaadin docs for multi-select combo box

MultiSelectComboBox<Country> comboBox = new MultiSelectComboBox<>(
        "Countries");
comboBox.setItems(DataService.getCountries());
comboBox.setItemLabelGenerator(Country::getName);
add(comboBox);

Steps to reproduce

  1. Use the example from "Minimal reproducible example" section.
  2. Notice when inspecting page html, that the component has placeholder="" attribute set

Environment

Vaadin version(s): 24.3.14 OS: Linux, Mac OS, haven't checked on Windows.

Browsers

Chrome, Firefox

web-padawan commented 1 month ago

This seems to be caused by the fact that placeholder property has an empty string default value in MSCB, which is different from other fields. This is related to the fact that the input placeholder is used to announce selected items (while the actual placeholder isn't shown). We should check if this can be refactored to not use empty string by default.