fix: Input components in form tag (#992)

scaffold-eth · Nov 21, 2024 · 3024992 · 3024992
1 parent ecffcbf
commit 3024992
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 5 deletions.
diff --git a/packages/nextjs/components/scaffold-eth/Address/AddressCopyIcon.tsx b/packages/nextjs/components/scaffold-eth/Address/AddressCopyIcon.tsx
@@ -14,7 +14,7 @@ export const AddressCopyIcon = ({ className, address }: { className?: string; ad
         }, 800);
       }}
     >
-      <button onClick={e => e.stopPropagation()}>
+      <button onClick={e => e.stopPropagation()} type="button">
         {addressCopied ? (
           <CheckCircleIcon className={className} aria-hidden="true" />
         ) : (

diff --git a/packages/nextjs/components/scaffold-eth/Balance.tsx b/packages/nextjs/components/scaffold-eth/Balance.tsx
@@ -55,6 +55,7 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
     <button
       className={`btn btn-sm btn-ghost flex flex-col font-normal items-center hover:bg-transparent ${className}`}
       onClick={toggleDisplayUsdMode}
+      type="button"
     >
       <div className="w-full flex items-center justify-center">
         {displayUsdMode ? (

diff --git a/packages/nextjs/components/scaffold-eth/Input/Bytes32Input.tsx b/packages/nextjs/components/scaffold-eth/Input/Bytes32Input.tsx
@@ -18,12 +18,13 @@ export const Bytes32Input = ({ value, onChange, name, placeholder, disabled }: C
       onChange={onChange}
       disabled={disabled}
       suffix={
-        <div
+        <button
           className="self-center cursor-pointer text-xl font-semibold px-4 text-accent"
           onClick={convertStringToBytes32}
+          type="button"
         >
           #
-        </div>
+        </button>
       }
     />
   );

diff --git a/packages/nextjs/components/scaffold-eth/Input/BytesInput.tsx b/packages/nextjs/components/scaffold-eth/Input/BytesInput.tsx
@@ -15,12 +15,13 @@ export const BytesInput = ({ value, onChange, name, placeholder, disabled }: Com
       onChange={onChange}
       disabled={disabled}
       suffix={
-        <div
+        <button
           className="self-center cursor-pointer text-xl font-semibold px-4 text-accent"
           onClick={convertStringToBytes}
+          type="button"
         >
           #
-        </div>
+        </button>
       }
     />
   );

diff --git a/packages/nextjs/components/scaffold-eth/Input/EtherInput.tsx b/packages/nextjs/components/scaffold-eth/Input/EtherInput.tsx
@@ -117,6 +117,7 @@ export const EtherInput = ({
             className="btn btn-primary h-[2.2rem] min-h-[2.2rem]"
             onClick={toggleDisplayUsdMode}
             disabled={!displayUsdMode && !nativeCurrencyPrice}
+            type="button"
           >
             <ArrowsRightLeftIcon className="h-3 w-3 cursor-pointer" aria-hidden="true" />
           </button>

diff --git a/packages/nextjs/components/scaffold-eth/Input/IntegerInput.tsx b/packages/nextjs/components/scaffold-eth/Input/IntegerInput.tsx
@@ -51,6 +51,7 @@ export const IntegerInput = ({
               className={`${disabled ? "cursor-not-allowed" : "cursor-pointer"} font-semibold px-4 text-accent`}
               onClick={multiplyBy1e18}
               disabled={disabled}
+              type="button"
             >
               ∗
             </button>