fixes #1109

docs/resources/changelog.md

@@ -8,6 +8,10 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 ?> During the beta period, these restrictions may be relaxed in the event of a mission-critical bug. 🐛
 
+## Next
+
+- Fixed a bug that prevented placeholders from showing in `<sl-select>` when `multiple` was used [#1109](https://github.com/shoelace-style/shoelace/issues/1109)
+
 ## 2.0.0-beta.88
 
 This release includes a complete rewrite of `<sl-select>` to improve accessibility and simplify its internals.

src/components/select/select.styles.ts

@@ -68,7 +68,7 @@ export default css`
   }
 
   /* Visually hide the display input when multiple is enabled */
-  .select--multiple .select__display-input {
+  .select--multiple:not(.select--placeholder-visible) .select__display-input {
     position: absolute;
     z-index: -1;
     top: 0;
@@ -167,7 +167,7 @@ export default css`
     margin-inline-end: var(--sl-input-spacing-small);
   }
 
-  .select--small.select--multiple .select__combobox {
+  .select--small.select--multiple:not(.select--placeholder-visible) .select__combobox {
     padding-block: 2px;
     padding-inline-start: 0;
   }
@@ -192,7 +192,7 @@ export default css`
     margin-inline-end: var(--sl-input-spacing-medium);
   }
 
-  .select--medium.select--multiple .select__combobox {
+  .select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {
     padding-inline-start: 0;
     padding-block: 3px;
   }
@@ -217,7 +217,7 @@ export default css`
     margin-inline-end: var(--sl-input-spacing-large);
   }
 
-  .select--large.select--multiple .select__combobox {
+  .select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {
     padding-inline-start: 0;
     padding-block: 4px;
   }

src/components/select/select.test.ts

@@ -29,6 +29,34 @@ describe('<sl-select>', () => {
     expect(el.displayInput.disabled).to.be.true;
   });
 
+  it('should show a placeholder when no options are selected', async () => {
+    const el = await fixture<SlSelect>(html`
+      <sl-select placeholder="Select one">
+        <sl-option value="option-1">Option 1</sl-option>
+        <sl-option value="option-2">Option 2</sl-option>
+        <sl-option value="option-3">Option 3</sl-option>
+      </sl-select>
+    `);
+    const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('[part~="display-input"]')!;
+
+    expect(getComputedStyle(displayInput).opacity).to.not.equal('0');
+    expect(displayInput.placeholder).to.equal('Select one');
+  });
+
+  it('should show a placeholder when no options are selected and multiple is set', async () => {
+    const el = await fixture<SlSelect>(html`
+      <sl-select placeholder="Select a few" multiple>
+        <sl-option value="option-1">Option 1</sl-option>
+        <sl-option value="option-2">Option 2</sl-option>
+        <sl-option value="option-3">Option 3</sl-option>
+      </sl-select>
+    `);
+    const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('[part~="display-input"]')!;
+
+    expect(getComputedStyle(displayInput).opacity).to.not.equal('0');
+    expect(displayInput.placeholder).to.equal('Select a few');
+  });
+
   it('should not allow selection when the option is disabled', async () => {
     const el = await fixture<SlSelect>(html`
       <sl-select value="option-1">

src/components/select/select.ts

@@ -487,7 +487,13 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
     // Update the value and display label
     if (this.multiple) {
       this.value = this.selectedOptions.map(el => el.value);
-      this.displayLabel = this.localize.term('numOptionsSelected', this.selectedOptions.length);
+
+      if (this.placeholder && this.value.length === 0) {
+        // When no items are selected, keep the value empty so the placeholder shows
+        this.displayLabel = '';
+      } else {
+        this.displayLabel = this.localize.term('numOptionsSelected', this.selectedOptions.length);
+      }
     } else {
       this.value = this.selectedOptions[0]?.value ?? '';
       this.displayLabel = this.selectedOptions[0]?.getTextLabel() ?? '';
@@ -612,6 +618,7 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
     const hasClearIcon = this.clearable && !this.disabled && this.value.length > 0;
+    const isPlaceholderVisible = this.placeholder && this.value.length === 0;
 
     return html`
       <div
@@ -646,6 +653,7 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
               'select--disabled': this.disabled,
               'select--multiple': this.multiple,
               'select--focused': this.hasFocus,
+              'select--placeholder-visible': isPlaceholderVisible,
               'select--top': this.placement === 'top',
               'select--bottom': this.placement === 'bottom',
               'select--small': this.size === 'small',