fix: show placeholder item when an empty item is selected (#7303) (#7304

) Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Apr 8, 2024 · 045e12a · 045e12a
1 parent 1f0a72e
commit 045e12a
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 15 deletions.
diff --git a/packages/select/src/vaadin-select-base-mixin.js b/packages/select/src/vaadin-select-base-mixin.js
@@ -512,23 +512,21 @@ export const SelectBaseMixin = (superClass) =>
 
       valueButton.removeAttribute('placeholder');
 
-      if (!selected) {
-        if (this.placeholder) {
-          const item = this.__createItemElement({ label: this.placeholder });
-          this.__appendValueItemElement(item, valueButton);
-          valueButton.setAttribute('placeholder', '');
-        }
-      } else {
+      if (this._hasContent(selected)) {
         this.__attachSelectedItem(selected);
+      } else if (this.placeholder) {
+        const item = this.__createItemElement({ label: this.placeholder });
+        this.__appendValueItemElement(item, valueButton);
+        valueButton.setAttribute('placeholder', '');
+      }
 
-        if (!this._valueChanging) {
-          this._selectedChanging = true;
-          this.value = selected.value || '';
-          if (this.__dispatchChangePending) {
-            this.__dispatchChange();
-          }
-          delete this._selectedChanging;
+      if (!this._valueChanging && selected) {
+        this._selectedChanging = true;
+        this.value = selected.value || '';
+        if (this.__dispatchChangePending) {
+          this.__dispatchChange();
         }
+        delete this._selectedChanging;
       }
 
       const labelledIdReferenceConfig =
@@ -540,6 +538,14 @@ export const SelectBaseMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    _hasContent(item) {
+      if (!item) {
+        return false;
+      }
+      return Boolean(item.hasAttribute('label') ? item.getAttribute('label') : item.textContent.trim());
+    }
+
     /** @private */
     _updateSelectedItem(value, items) {
       if (items) {

diff --git a/packages/select/test/select.common.js b/packages/select/test/select.common.js
@@ -447,9 +447,28 @@ describe('vaadin-select', () => {
     });
 
     describe('placeholder', () => {
+      beforeEach(() => {
+        select.placeholder = 'Select an item';
+      });
+
       it('should set placeholder as a value node text content', async () => {
         select.value = null;
-        select.placeholder = 'Select an item';
+        await nextUpdate(select);
+        expect(valueButton.textContent).to.equal('Select an item');
+      });
+
+      it('should show placeholder when selecting an item with empty label', async () => {
+        select.opened = true;
+        await nextRender();
+        click(select._items[4]);
+        await nextUpdate(select);
+        expect(valueButton.textContent).to.equal('Select an item');
+      });
+
+      it('should show placeholder when selecting an item with empty text', async () => {
+        select.opened = true;
+        await nextRender();
+        click(select._items[3]);
         await nextUpdate(select);
         expect(valueButton.textContent).to.equal('Select an item');
       });