Merge pull request #581 from components-ai/input-selection-handling

Prevent browser focus handling for labels and inputs in the canvas

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) => {