fix: "Enter" keypress when using ExternalInput together with ArrayFields

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 23, 2024 · 5afe5fe · 5afe5fe
1 parent 4c77ac5
commit 5afe5fe
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 &&