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

src/components/InteractionMapMachineProvider.tsx

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

src/index.css

@@ -96,6 +96,11 @@ button:disabled {
   @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 {
   @apply text-primary underline hover:hue-rotate-15;
 }