Make buttons' sub-elements not interactable so out handlers work correctly

This commit is contained in:
Frank Noirot
2024-05-21 18:31:09 -04:00
parent 83f8b7bb93
commit 8c94e166ca
2 changed files with 9 additions and 3 deletions

View File

@ -186,9 +186,10 @@ export function InteractionMapMachineProvider({
if ( if (
event.BUBBLING_PHASE && event.BUBBLING_PHASE &&
!( !(
event instanceof MouseEvent && (event.target instanceof HTMLElement &&
event.target instanceof HTMLElement && ['INPUT', 'BUTTON', 'ANCHOR'].includes(event.target.tagName)) ||
['INPUT', 'BUTTON', 'ANCHOR'].includes(event.target.tagName) (event.target as HTMLElement).getAttribute('contenteditable') ===
'true'
) )
) { ) {
send({ type: 'Fire event', data: event }) send({ type: 'Fire event', data: event })

View File

@ -96,6 +96,11 @@ button:disabled {
@apply bg-chalkboard-90 text-chalkboard-40 border-chalkboard-70; @apply bg-chalkboard-90 text-chalkboard-40 border-chalkboard-70;
} }
/* Thanks Chris I needed this https://css-tricks.com/slightly-careful-sub-elements-clickable-things/ */
button > * {
@apply pointer-events-none;
}
a { a {
@apply text-primary underline hover:hue-rotate-15; @apply text-primary underline hover:hue-rotate-15;
} }