fix: do not show placeholder when select item has child elements (#7504…

…) (#7507) Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>
vaadin · Jul 1, 2024 · 2d21375 · 2d21375
1 parent 8fd9431
commit 2d21375
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/select/src/vaadin-select-base-mixin.js b/packages/select/src/vaadin-select-base-mixin.js
@@ -539,7 +539,9 @@ export const SelectBaseMixin = (superClass) =>
       if (!item) {
         return false;
       }
-      return Boolean(item.hasAttribute('label') ? item.getAttribute('label') : item.textContent.trim());
+      const hasText = Boolean(item.hasAttribute('label') ? item.getAttribute('label') : item.textContent.trim());
+      const hasChildren = item.childElementCount > 0;
+      return hasText || hasChildren;
     }
 
     /** @private */

diff --git a/packages/select/test/select.common.js b/packages/select/test/select.common.js
@@ -103,6 +103,8 @@ describe('vaadin-select', () => {
               <vaadin-item value="v4" disabled>Disabled</vaadin-item>
               <vaadin-item value="5">A number</vaadin-item>
               <vaadin-item value="false">A boolean</vaadin-item>
+              <vaadin-item label="foo"></vaadin-item>
+              <vaadin-item><img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="" /></vaadin-item>
             </vaadin-list-box>
           `,
           root,
@@ -472,6 +474,19 @@ describe('vaadin-select', () => {
         await nextUpdate(select);
         expect(valueButton.textContent).to.equal('Select an item');
       });
+
+      it('should not show placeholder for items with label, text content or child elements', async () => {
+        const emptyItems = [select._items[3], select._items[4]];
+        const nonEmptyItems = select._items.filter((item) => !emptyItems.includes(item));
+
+        for (const item of nonEmptyItems) {
+          select.opened = true;
+          await nextRender();
+          click(item);
+          await nextUpdate(select);
+          expect(valueButton.textContent).not.to.equal('Select an item');
+        }
+      });
     });
 
     describe('has-value attribute', () => {