Ancestors

Toot

Written by Noah Liebman on 2024-12-27 at 17:15

How do button #webComponents that wrap a real prevent click events from bubbling up when the button is disabled? Handlers on containers shouldn’t fire, but do.

Adding a capture-phase handler in the component to stop propagation comes to mind, but that doesn’t seem to be what shoelace is doing.

=> More informations about this toot | More toots from noleli@mastodon.social

Descendants

Written by westbrook on 2024-12-27 at 17:53

@noleli I have a [disabled] attribute that applies to the host and then is used in the render phase to disabled the . And then I use:

:host([disabled]) {

pointer-events: none;

}

Less JS for the win.

=> More informations about this toot | More toots from westbrook@mastodon.social

Written by Noah Liebman on 2024-12-27 at 18:30

@westbrook so, I had been doing something like that, but using pointer-events: none on host will allow click events to bubble up rather than swallowing them, which you don’t want. (Maybe it’s not bubbling, just ignoring the component entirely, but either way, not what you want.) https://codepen.io/noleli/pen/jENLGgN

This reduced case is working as expected (fine without setting pointer-events: none), so there must be something else causing my current frustration. 😅 Thanks!

=> More informations about this toot | More toots from noleli@mastodon.social

Written by westbrook on 2024-12-27 at 18:51

@noleli I'd never thought of that an undesired functionality, nice call out!

[#]TIL

=> More informations about this toot | More toots from westbrook@mastodon.social