fixes #1119

docs/resources/changelog.md

@@ -14,6 +14,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Added `tags` and `tag` parts to `<sl-select>`
 - Fixed a bug in `<sl-select>` that prevented placeholders from showing when `multiple` was used [#1109](https://github.com/shoelace-style/shoelace/issues/1109)
 - Fixed a bug in `<sl-select>` that caused tags to not be rounded when using the `pill` attribute [#1117](https://github.com/shoelace-style/shoelace/issues/1117)
+- Fixed a bug in `<sl-select>` where the `sl-change` and `sl-input` events didn't weren't emitted when removing tags [#1119](https://github.com/shoelace-style/shoelace/issues/1119)
 - Fixed a bug in `<sl-color-picker>` that logged a console error when parsing swatches with whitespace
 - Fixed a bug in `<sl-color-picker>` that caused selected colors to be wrong due to incorrect HSV calculations
 - Fixed a bug in `<sl-radio-button>` that caused the checked button's right border to be incorrect [#1110](https://github.com/shoelace-style/shoelace/issues/1110)

src/components/select/select.test.ts

@@ -390,6 +390,29 @@ describe('<sl-select>', () => {
     expect(clearHandler).to.have.been.calledOnce;
   });
 
+  it('should emit sl-change and sl-input when a tag is removed', async () => {
+    const el = await fixture<SlSelect>(html`
+      <sl-select value="option-1 option-2 option-3" 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 changeHandler = sinon.spy();
+    const inputHandler = sinon.spy();
+    const tag = el.shadowRoot!.querySelector('[part~="tag"]')!;
+    const removeButton = tag.shadowRoot!.querySelector('[part~="remove-button"]')!;
+
+    el.addEventListener('sl-change', changeHandler);
+    el.addEventListener('sl-input', inputHandler);
+
+    await clickOnElement(removeButton);
+    await el.updateComplete;
+
+    expect(changeHandler).to.have.been.calledOnce;
+    expect(inputHandler).to.have.been.calledOnce;
+  });
+
   it('should emit sl-show, sl-after-show, sl-hide, and sl-after-hide events when the listbox opens and closes', async () => {
     const el = await fixture<SlSelect>(html`
       <sl-select value="option-1">

src/components/select/select.ts

@@ -418,6 +418,16 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
     this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
   }
 
+  private handleTagRemove(event: CustomEvent, option: SlOption) {
+    event.stopPropagation();
+
+    if (!this.disabled) {
+      this.toggleOptionSelection(option, false);
+      this.emit('sl-input');
+      this.emit('sl-change');
+    }
+  }
+
   // Gets an array of all <sl-option> elements
   private getAllOptions() {
     return [...this.querySelectorAll<SlOption>('sl-option')];
@@ -713,12 +723,7 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
                               ?pill=${this.pill}
                               size=${this.size}
                               removable
-                              @sl-remove=${(event: CustomEvent) => {
-                                event.stopPropagation();
-                                if (!this.disabled) {
-                                  this.toggleOptionSelection(option, false);
-                                }
-                              }}
+                              @sl-remove=${(event: CustomEvent) => this.handleTagRemove(event, option)}
                             >
                               ${option.getTextLabel()}
                             </sl-tag>