sl-remove event cannot be prevented from triggering dropdown

[brettwillis]

Consider a removable <sl-tag> as the trigger element inside an <sl-dropdown>.

<sl-dropdown>
  <sl-tag slot="trigger" removable @sl-remove=${onRemove}>
  </sl-tag>
</sl-dropdown>

Then even with the below event handler, the dropdown still opens. We cannot prevent the trigger as one might expect.

function onRemove(e) {
  e.preventDefault();
  e.stopPropagation();
}

I imagine it may be because the the click event bubbles to the dropdown irrespective of what happens to the sl-remove event.

I can workaround by doing e.stopPropagation() on the sl-tag click event with some conditional logic to detect if it was the remove button (using e.composedPath()).

[claviska]

The sl-remove event has nothing to do with the dropdown, so canceling it will have no affect. You need to listen for clicks on the tag and identify whether or not the remove button was the target.

https://codepen.io/claviska/pen/ZEPLgjB?editors=1010

I'm not sure if this is just a minimal test case or if you're using the tag as-is in your app, but the dropdown's trigger should probably be a button instead.

[brettwillis]

Yeah I was going to suggest that the click event propagating from the tag could be cancelled by stopping/cancelling the remove event, but after pondering it further, I think such behaviour would be more convoluted/unexpected. Agree to close.