fix: don't submit buttons if Puck used in form

measuredco · Sep 3, 2024 · f761e5f · f761e5f
1 parent 937bb92
commit f761e5f
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 1 deletion.
diff --git a/apps/demo/app/custom-ui/[...puckPath]/client.tsx b/apps/demo/app/custom-ui/[...puckPath]/client.tsx
@@ -103,6 +103,7 @@ const Tabs = ({
           return (
             <button
               key={idx}
+              type="button"
               onClick={() => {
                 if (currentTab === idx) {
                   setCurrentTab(-1);

diff --git a/packages/core/components/ActionBar/index.tsx b/packages/core/components/ActionBar/index.tsx
@@ -25,7 +25,12 @@ export const Action = ({
   label?: string;
   onClick: (e: SyntheticEvent) => void;
 }) => (
-  <button className={getClassName("action")} onClick={onClick} title={label}>
+  <button
+    type="button"
+    className={getClassName("action")}
+    onClick={onClick}
+    title={label}
+  >
     {children}
   </button>
 );

diff --git a/packages/core/components/ComponentList/index.tsx b/packages/core/components/ComponentList/index.tsx
@@ -56,6 +56,7 @@ const ComponentList = ({
     <div className={getClassName({ isExpanded: expanded })}>
       {title && (
         <button
+          type="button"
           className={getClassName("title")}
           onClick={() =>
             setUi({

diff --git a/packages/core/components/ExternalInput/index.tsx b/packages/core/components/ExternalInput/index.tsx
@@ -116,6 +116,7 @@ export const ExternalInput = ({
         </button>
         {value && (
           <button
+            type="button"
             className={getClassName("detachButton")}
             onClick={() => {
               onChange(null);

diff --git a/packages/core/components/LayerTree/index.tsx b/packages/core/components/LayerTree/index.tsx
@@ -87,6 +87,7 @@ export const LayerTree = ({
             >
               <div className={getClassNameLayer("inner")}>
                 <button
+                  type="button"
                   className={getClassNameLayer("clickable")}
                   onClick={() => {
                     if (isSelected) {

diff --git a/packages/core/components/SidebarSection/index.tsx b/packages/core/components/SidebarSection/index.tsx
@@ -40,6 +40,7 @@ export const SidebarSection = ({
             ? breadcrumbs.map((breadcrumb, i) => (
                 <div key={i} className={getClassName("breadcrumb")}>
                   <button
+                    type="button"
                     className={getClassName("breadcrumbLabel")}
                     onClick={() => setUi({ itemSelector: breadcrumb.selector })}
                   >