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

Prevent browser focus handling for labels and inputs in the canvas
components-ai · Aug 23, 2022 · beb5440 · beb5440 · vercel · Aug 23, 2022
2 parents 62e085a + c9b6365
commit beb5440
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 1 deletion.
diff --git a/.changeset/witty-lions-compete.md b/.changeset/witty-lions-compete.md
@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Disable browser label/input selection handling in the canvas
diff --git a/apps/docs/data/initial-html-editor-data.ts b/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: {},
+          },
+        },
+      ],
+    },
+  },
 ]
diff --git a/packages/gui/src/components/html/Component/Provider.tsx b/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) => {