fix: sd-combobox and sd-select [skip chromatic]

.changeset/red-drinks-travel.md

@@ -0,0 +1,11 @@
+---
+'@solid-design-system/components': patch
+'@solid-design-system/docs': patch
+---
+
+Bugfixes and minor non-breaking changes to the sd-select and sd-combobox components
+
+- sd-combobox: emit events correctly
+- sd-combobox: set options' initial attributes
+- sd-select and sd-combobox: add max-options-tag-label attribute
+- sd-select: add --tag-max-width and ellipsis

packages/components/src/components/combobox/combobox.test.ts

@@ -573,7 +573,7 @@ describe('<sd-combobox>', () => {
 
     it('should remove tag and option when tag is focused and backspace is pressed', async () => {
       const el = await fixture<SdSelect>(html`
-        <sd-combobox value="option-1 option-2" multiple useTags>
+        <sd-combobox value="option-1 option-2" multiple>
           <sd-option value="option-1">Option 1</sd-option>
           <sd-option value="option-2">Option 2</sd-option>
           <sd-option value="option-3">Option 3</sd-option>
@@ -627,6 +627,33 @@ describe('<sd-combobox>', () => {
 
       expect(el.value).to.deep.equal(['Option 2', 'Option 3']);
     });
+
+    it('should emit sd-change and sd-input when the value changes', async () => {
+      const el = await fixture<SdCombobox>(html`
+        <sd-combobox value="option-1" multiple>
+          <sd-option value="option-1">Option 1</sd-option>
+          <sd-option value="option-2">Option 2</sd-option>
+          <sd-option value="option-3">Option 3</sd-option>
+        </sd-combobox>
+      `);
+      const inputHandler = sinon.spy();
+      const changeHandler = sinon.spy();
+
+      el.addEventListener('sd-input', inputHandler);
+      el.addEventListener('sd-change', changeHandler);
+      await el.show();
+      await el.updateComplete;
+      const filteredListbox = el.shadowRoot!.querySelector('[part="filtered-listbox"]')!;
+      const secondOption = filteredListbox.querySelectorAll<SdOption>('sd-option')[1];
+      await clickOnElement(secondOption);
+      await el.updateComplete;
+      const thirdOption = filteredListbox.querySelectorAll<SdOption>('sd-option')[2];
+      await clickOnElement(thirdOption);
+      await el.updateComplete;
+
+      expect(inputHandler).to.have.been.calledTwice;
+      expect(changeHandler).to.have.been.calledTwice;
+    });
   });
 
   describe('when using constraint validation', () => {

packages/components/src/components/combobox/combobox.ts

@@ -157,6 +157,9 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
   /** Placeholder text to show as a hint when the combobox is empty. */
   @property() placeholder = this.localize.term('comboboxDefaultPlaceholder');
 
+  /** Label text shown on tag if max-options-visible is reached. */
+  @property({ attribute: 'max-options-tag-label' }) maxOptionsTagLabel = this.localize.term('tagsSelected');
+
   /** Disables the combobox control. */
   @property({ reflect: true, type: Boolean }) disabled = false;
 
@@ -285,7 +288,6 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
       this.selectedTextLabel = option?.getTextLabel() || '';
     }
     this.formControlController.updateValidity();
-    this.applySizeToOptions();
   }
 
   /** Gets the validity state object */
@@ -346,7 +348,7 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
             removable
             @keydown=${(event: KeyboardEvent) => this.handleTagMaxOptionsKeyDown(event)}
             @sd-remove=${(event: CustomEvent) => this.handleTagRemove(event)}
-            >${this.selectedOptions.length} ${this.localize.term('tagsSelected')}</sd-tag
+            >${this.selectedOptions.length} ${this.maxOptionsTagLabel}</sd-tag
           >
         `
       ];
@@ -459,16 +461,16 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
           this.setSelectedOptions(currentOption);
         }
 
-        // Set focus after updating so the value is announced by screen readers
-        this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));
+        this.updateComplete.then(() => {
+          // Set focus after updating so the value is announced by screen readers
+          this.displayInput.focus({ preventScroll: true });
 
-        if (this.value !== oldValue) {
           // Emit after updating
-          this.updateComplete.then(() => {
+          if (this.value !== oldValue) {
             this.emit('sd-input');
             this.emit('sd-change');
-          });
-        }
+          }
+        });
       }
 
       this.displayInput.focus({ preventScroll: true });
@@ -519,6 +521,7 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
 
   private handleTagKeyDown(event: KeyboardEvent, option: SdOption) {
     if (event.key === 'Backspace' && this.multiple) {
+      event.preventDefault();
       event.stopPropagation();
       this.handleTagRemove(new CustomEvent('sd-remove'), option);
       this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));
@@ -527,6 +530,7 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
 
   private handleTagMaxOptionsKeyDown(event: KeyboardEvent) {
     if (event.key === 'Backspace' && this.multiple) {
+      event.preventDefault();
       event.stopPropagation();
       this.handleTagRemove(new CustomEvent('sd-remove'), this.selectedOptions[this.selectedOptions.length - 1]);
       this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));
@@ -636,16 +640,16 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
         this.setOrderedSelectedOptions(option);
         this.setSelectedOptions(option);
       }
-      // Set focus after updating so the value is announced by screen readers
-      this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));
 
-      if (this.value !== oldValue) {
+      this.updateComplete.then(() => {
+        // Set focus after updating so the value is announced by screen readers
+        this.displayInput.focus({ preventScroll: true });
         // Emit after updating
-        this.updateComplete.then(() => {
+        if (this.value !== oldValue) {
           this.emit('sd-input');
           this.emit('sd-change');
-        });
-      }
+        }
+      });
       if (!this.multiple) {
         this.hide();
         this.displayInput.focus({ preventScroll: true });
@@ -850,6 +854,8 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
 
         clonedOption.current = clonedOption.value === this.lastOption?.value;
         clonedOption.selected = option.selected;
+        clonedOption.checkbox = option.checkbox;
+        clonedOption.size = option.size;
 
         // Check if the option has a sd-optgroup as parent
         const hasOptgroup = option.parentElement?.tagName.toLowerCase() === 'sd-optgroup';
@@ -1094,6 +1100,8 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
 
     const slottedOptions = this.getSlottedOptions();
     const slottedOptgroups = this.getSlottedOptGroups();
+    this.applySizeToOptions();
+
     slottedOptions.forEach((option, index) => {
       if (this.multiple) {
         option.checkbox = true;

packages/components/src/components/select/select.ts

@@ -64,6 +64,8 @@ import type SdOption from '../option/option';
  * @csspart tag__removable-indicator - The tag's remove button.
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The container that wraps the expand icon.
+ *
+ * @cssproperty --tag-max-width - Set the maximum width of the tags and to show an ellipsis. Defaults to "15ch"
  */
 @customElement('sd-select')
 export default class SdSelect extends SolidElement implements SolidFormControl {
@@ -136,6 +138,9 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
   /** Placeholder text to show as a hint when the select is empty. */
   @property() placeholder = this.localize.term('selectDefaultPlaceholder');
 
+  /** Label text shown on tag if max-options-visible is reached. */
+  @property({ attribute: 'max-options-tag-label' }) maxOptionsTagLabel = this.localize.term('tagsSelected');
+
   /** Disables the select control. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
@@ -414,6 +419,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
 
   private handleTagKeyDown(event: KeyboardEvent, option: SdOption) {
     if (event.key === 'Backspace' && this.multiple) {
+      event.preventDefault();
       event.stopPropagation();
       const tagParent = (event.currentTarget as HTMLElement)?.parentElement;
       const previousTag = tagParent?.previousElementSibling?.querySelector('sd-tag');
@@ -434,6 +440,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
 
   private handleTagMaxOptionsKeyDown(event: KeyboardEvent) {
     if (event.key === 'Backspace' && this.multiple) {
+      event.preventDefault();
       event.stopPropagation();
       this.handleTagRemove(new CustomEvent('sd-remove'), this.selectedOptions[this.selectedOptions.length - 1]);
       this.updateComplete.then(() => {
@@ -692,7 +699,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
             removable
             @keydown=${(event: KeyboardEvent) => this.handleTagMaxOptionsKeyDown(event)}
             @sd-remove=${(event: CustomEvent) => this.handleTagRemove(event)}
-            >${this.selectedOptions.length} ${this.localize.term('tagsSelected')}</sd-tag
+            >${this.selectedOptions.length} ${this.maxOptionsTagLabel}</sd-tag
           >
         `
       ];
@@ -1151,6 +1158,14 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
         @apply rounded-default px-1;
       }
 
+      sd-tag::part(content) {
+        max-width: var(--tag-max-width, 15ch);
+        overflow: hidden;
+        white-space: nowrap;
+        display: inline-block;
+        text-overflow: ellipsis;
+      }
+
       sd-tag[size='lg']::part(base) {
         @apply px-2;
       }

packages/docs/src/stories/components/optgroup.stories.ts

@@ -78,8 +78,7 @@ export const Disabled = {
   render: () => html`
     <div class="h-[260px] w-[400px]">
       <sd-combobox>
-        <sd-optgroup disabled>
-          <span slot="label">Section 1</span>
+        <sd-optgroup label="Section 1" disabled>
           <sd-option value="1">Option</sd-option>
           <sd-option value="2">Option</sd-option>
           <sd-option value="3">Option</sd-option>

packages/docs/src/stories/components/select.stories.ts

@@ -238,6 +238,7 @@ export const Clearable = {
 
 /**
  * Use the `multiple` attribute to allow multiple options to be selected.
+ * Use `--tag-max-width` to set the maximum width of the tags and to show an ellipsis, e.g. `<sd-select style="--tag-max-width: 40px">`. The default value is `15ch`
  */
 
 export const Multiple = {