sl-select's sl-change event not firing when deleting an option

[claviska]

Discussed in #1118

^{Originally posted by ddworkin January 9, 2023}
I have code like this:

<sl-select id='blah' multiple clearable>
  <sl-option value="opt1">Option 1</sl-option>
  <sl-option value="opt2">Option 2</sl-option>
</sl-select>	

When i choose an option, the sl-change event fires. If i clear all options with the x button to clear, the sl-clear event fires. But if I delete an option by clicking on the x for that option, no event fires

$("#blah").on("sl-change sl-clear", function () {
  console.log("got event");
});

[claviska]

Thanks for helping me iron this component out. I'm always reluctant to rewrite a component from scratch, especially this close to 2.0 stable, but there were some nasty accessibility issues that I really needed to get done before the stable version lands. Your feedback is really helpful to uncover and fix little things like this!

The issue has been fixed and I've added a test to prevent regressions in 9a6b9a7.

[ddworkin]

Thanks! I'm new to using Shoelace - for the sl-select, I am currently using a javascript package called select2 but I like what you have in Shoelace ... is there some workaround I can do in my code for this issue until you release a new version? Unfortunately with this bug, I don't think I can use the sl-select

[claviska]

This is ugly, but it should get you by until the next version comes out.

const select = document.querySelector('sl-select');

select.addEventListener('click', event => {
  const isRemoveButton = event.composedPath().filter(el => el.classList?.contains('tag__remove')).length > 0;
  
  if (isRemoveButton) {
    select.updateComplete.then(() => {
      console.log('tag removed');
    });
  }
});

[ddworkin]

Perfect, that worked - thanks!!

…

On Jan 9, 2023, at 4:37 PM, Cory LaViska ***@***.***> wrote: This is ugly, but it should get you by until the next version comes out. const select = document.querySelector('sl-select'); select.addEventListener('click', event => { const isRemoveButton = event.composedPath().filter(el => el.classList?.contains('tag__remove')).length > 0; if (isRemoveButton) { select.updateComplete.then(() => { console.log('tag removed'); }); } }); — Reply to this email directly, view it on GitHub <#1119 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AITKVW43UZ32LK7A7ZTGXMTWRSAK7ANCNFSM6AAAAAATV2HDZE>. You are receiving this because you commented.