Prevent browser focus handling for labels and inputs in the canvas

A label with a mapping to an input causes the browser to autofocus
the input. This isn't desirable when in the canvas because we're
overriding selection behavior for elements. So, this turns it off
with stopImmediatePropagation.

Author: johno

.changeset/witty-lions-compete.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Disable browser label/input selection handling in the canvas

apps/docs/data/initial-html-editor-data.ts

@@ -1634,4 +1634,46 @@ export const initialComponents: any = [
       ],
     },
   },
+  {
+    type: 'component',
+    id: 'ddeeff123',
+    tagName: 'Input',
+    attributes: {},
+    value: {
+      type: 'element',
+      tagName: 'input',
+      attributes: {},
+      style: {},
+    },
+  },
+  {
+    type: 'component',
+    id: 'ddeeff456',
+    tagName: 'Email Input',
+    attributes: {},
+    value: {
+      tagName: 'label',
+      attributes: {},
+      style: {},
+      children: [
+        {
+          type: 'element',
+          tagName: 'span',
+          attributes: {},
+          children: [{ type: 'text', value: 'Email' }],
+        },
+        {
+          type: 'component',
+          tagName: 'Input',
+          attributes: {},
+          value: {
+            type: 'element',
+            tagName: 'input',
+            attributes: {},
+            style: {},
+          },
+        },
+      ],
+    },
+  },
 ]

packages/gui/src/components/html/Component/Provider.tsx

@@ -43,7 +43,7 @@ export function ComponentProvider({
   } = useHtmlEditor()
   const selectComponent = (e: MouseEvent) => {
     setSelected(path)
-    e.stopPropagation()
+    e.stopImmediatePropagation()
   }
 
   const updateComponent = (fullEditPath: ElementPath, newValue: HtmlNode) => {