fix: prevent unexpected field behaviour when pressing "Enter" key

Closes #345 ExternalInput and ArrayFields have button elements which assumed the default type "submit". This causes the buttons to be automatically triggered when "Enter" keypress happens on other inputs of the form. Setting their type as "button" instead, fixes the behaviour.
measuredco · Mar 25, 2024 · bf4f527 · bf4f527
1 parent 68f97ae
commit bf4f527
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 0 deletions.
diff --git a/packages/core/components/ExternalInput/index.tsx b/packages/core/components/ExternalInput/index.tsx
@@ -96,6 +96,7 @@ export const ExternalInput = ({
     >
       <div className={getClassName("actions")}>
         <button
+          type="button"
           onClick={() => setOpen(true)}
           className={getClassName("button")}
         >

diff --git a/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx b/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
@@ -205,6 +205,7 @@ export const ArrayField = ({
                                 <div className={getClassNameItem("actions")}>
                                   <div className={getClassNameItem("action")}>
                                     <IconButton
+                                      type="button"
                                       disabled={
                                         field.min !== undefined &&
                                         field.min >=
@@ -292,6 +293,7 @@ export const ArrayField = ({
                 {provided.placeholder}
 
                 <button
+                  type="button"
                   className={getClassName("addButton")}
                   disabled={
                     field.max !== undefined &&