fix: don't apply placeholder styles to an empty value item (#2877)

vaadin · Oct 15, 2021 · 2ea0415 · 2ea0415
1 parent 7cbdc3e
commit 2ea0415
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 4 deletions.
diff --git a/packages/select/src/vaadin-select.js b/packages/select/src/vaadin-select.js
@@ -532,10 +532,13 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
 
     const selected = this._items[this._menuElement.selected];
 
+    this._valueButton.removeAttribute('placeholder');
+
     if (!selected) {
       if (this.placeholder) {
         const item = this.__createItem(this.placeholder);
         this.__appendItem(item);
+        this._valueButton.setAttribute('placeholder', '');
       }
     } else {
       this.__attachSelectedItem(selected);

diff --git a/packages/select/test/visual/lumo/screenshots/select/baseline/empty-value.png b/packages/select/test/visual/lumo/screenshots/select/baseline/empty-value.png
diff --git a/packages/select/test/visual/lumo/select.test.js b/packages/select/test/visual/lumo/select.test.js
@@ -136,4 +136,17 @@ describe('select', () => {
     element.value = 'item 1';
     await visualDiff(div, 'width-value');
   });
+
+  it('empty value', async () => {
+    // To make sure placeholder styles aren't applied to empty value item
+    element.placeholder = 'Placeholder';
+    element.renderer = (root) => {
+      root.innerHTML = `
+        <vaadin-list-box>
+          <vaadin-item value="">Empty</vaadin-item>
+        </vaadin-list-box>
+        `;
+    };
+    await visualDiff(div, 'empty-value');
+  });
 });
diff --git a/packages/select/test/visual/material/screenshots/select/baseline/empty-value.png b/packages/select/test/visual/material/screenshots/select/baseline/empty-value.png
diff --git a/packages/select/test/visual/material/select.test.js b/packages/select/test/visual/material/select.test.js
@@ -118,4 +118,17 @@ describe('select', () => {
     element.value = 'item 1';
     await visualDiff(div, 'width-value');
   });
+
+  it('empty value', async () => {
+    // To make sure placeholder styles aren't applied to empty value item
+    element.placeholder = 'Placeholder';
+    element.renderer = (root) => {
+      root.innerHTML = `
+        <vaadin-list-box>
+          <vaadin-item value="">Empty</vaadin-item>
+        </vaadin-list-box>
+        `;
+    };
+    await visualDiff(div, 'empty-value');
+  });
 });
diff --git a/packages/select/theme/lumo/vaadin-select-styles.js b/packages/select/theme/lumo/vaadin-select-styles.js
@@ -20,13 +20,13 @@ const select = css`
   }
 
   /* placeholder styles */
-  :host(:not([has-value])) [part='input-field'] ::slotted([slot='value']) {
+  :host [part='input-field'] ::slotted([slot='value'][placeholder]) {
     color: inherit;
     transition: opacity 0.175s 0.1s;
     opacity: 0.5;
   }
 
-  :host([has-value]) [part='input-field'] ::slotted([slot='value']) {
+  :host [part='input-field'] ::slotted([slot='value']) {
     color: var(--lumo-body-text-color);
   }
 

diff --git a/packages/select/theme/material/vaadin-select-styles.js b/packages/select/theme/material/vaadin-select-styles.js
@@ -15,13 +15,13 @@ const select = css`
   }
 
   /* placeholder styles */
-  :host(:not([has-value])) [part='input-field'] ::slotted([slot='value']) {
+  :host [part='input-field'] ::slotted([slot='value'][placeholder]) {
     color: var(--material-disabled-text-color);
     transition: opacity 0.175s 0.1s;
     opacity: 1;
   }
 
-  :host([has-value]) [part='input-field'] ::slotted([slot='value']) {
+  :host [part='input-field'] ::slotted([slot='value']) {
     color: var(--material-body-text-color);
   }