From ff0b4394b128958916420c78f44e908a9fd49fab Mon Sep 17 00:00:00 2001
From: Karthik Nishanth <nishanthkarthik@live.com>
Date: Sat, 18 May 2024 01:36:08 -0700
Subject: [PATCH] feat: add missing `type="button"` (#8030)

---
 packages/excalidraw/components/Actions.tsx               | 1 +
 packages/excalidraw/components/ButtonIconSelect.tsx      | 1 +
 packages/excalidraw/components/CheckboxItem.tsx          | 7 ++++++-
 packages/excalidraw/components/ContextMenu.tsx           | 1 +
 packages/excalidraw/components/Dialog.tsx                | 1 +
 packages/excalidraw/components/FollowMode/FollowMode.tsx | 6 +++++-
 packages/excalidraw/components/IconPicker.tsx            | 2 ++
 packages/excalidraw/components/LayerUI.tsx               | 1 +
 packages/excalidraw/components/MobileMenu.tsx            | 1 +
 packages/excalidraw/components/PasteChartDialog.tsx      | 1 +
 10 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/excalidraw/components/Actions.tsx b/packages/excalidraw/components/Actions.tsx
index 9604afdecd..c49b4a5f0f 100644
--- a/packages/excalidraw/components/Actions.tsx
+++ b/packages/excalidraw/components/Actions.tsx
@@ -468,6 +468,7 @@ export const ExitZenModeAction = ({
   showExitZenModeBtn: boolean;
 }) => (
   <button
+    type="button"
     className={clsx("disable-zen-mode", {
       "disable-zen-mode--visible": showExitZenModeBtn,
     })}
diff --git a/packages/excalidraw/components/ButtonIconSelect.tsx b/packages/excalidraw/components/ButtonIconSelect.tsx
index eec8870a9d..6933f03048 100644
--- a/packages/excalidraw/components/ButtonIconSelect.tsx
+++ b/packages/excalidraw/components/ButtonIconSelect.tsx
@@ -28,6 +28,7 @@ export const ButtonIconSelect = <T extends Object>(
     {props.options.map((option) =>
       props.type === "button" ? (
         <button
+          type="button"
           key={option.text}
           onClick={(event) => props.onClick(option.value, event)}
           className={clsx({
diff --git a/packages/excalidraw/components/CheckboxItem.tsx b/packages/excalidraw/components/CheckboxItem.tsx
index 14814cc10c..21c5cfafd2 100644
--- a/packages/excalidraw/components/CheckboxItem.tsx
+++ b/packages/excalidraw/components/CheckboxItem.tsx
@@ -22,7 +22,12 @@ export const CheckboxItem: React.FC<{
         ).focus();
       }}
     >
-      <button className="Checkbox-box" role="checkbox" aria-checked={checked}>
+      <button
+        type="button"
+        className="Checkbox-box"
+        role="checkbox"
+        aria-checked={checked}
+      >
         {checkIcon}
       </button>
       <div className="Checkbox-label">{children}</div>
diff --git a/packages/excalidraw/components/ContextMenu.tsx b/packages/excalidraw/components/ContextMenu.tsx
index 7353c56c66..517e5faede 100644
--- a/packages/excalidraw/components/ContextMenu.tsx
+++ b/packages/excalidraw/components/ContextMenu.tsx
@@ -105,6 +105,7 @@ export const ContextMenu = React.memo(
                 }}
               >
                 <button
+                  type="button"
                   className={clsx("context-menu-item", {
                     dangerous: actionName === "deleteSelectedElements",
                     checkmark: item.checked?.(appState),
diff --git a/packages/excalidraw/components/Dialog.tsx b/packages/excalidraw/components/Dialog.tsx
index 667e681c6d..06e2a4fb88 100644
--- a/packages/excalidraw/components/Dialog.tsx
+++ b/packages/excalidraw/components/Dialog.tsx
@@ -123,6 +123,7 @@ export const Dialog = (props: DialogProps) => {
             onClick={onClose}
             title={t("buttons.close")}
             aria-label={t("buttons.close")}
+            type="button"
           >
             {CloseIcon}
           </button>
diff --git a/packages/excalidraw/components/FollowMode/FollowMode.tsx b/packages/excalidraw/components/FollowMode/FollowMode.tsx
index 302f9d73e4..89581bfa41 100644
--- a/packages/excalidraw/components/FollowMode/FollowMode.tsx
+++ b/packages/excalidraw/components/FollowMode/FollowMode.tsx
@@ -27,7 +27,11 @@ const FollowMode = ({
             {userToFollow.username}
           </span>
         </div>
-        <button onClick={onDisconnect} className="follow-mode__disconnect-btn">
+        <button
+          type="button"
+          onClick={onDisconnect}
+          className="follow-mode__disconnect-btn"
+        >
           {CloseIcon}
         </button>
       </div>
diff --git a/packages/excalidraw/components/IconPicker.tsx b/packages/excalidraw/components/IconPicker.tsx
index 3295c4a04d..4d6e95af5d 100644
--- a/packages/excalidraw/components/IconPicker.tsx
+++ b/packages/excalidraw/components/IconPicker.tsx
@@ -108,6 +108,7 @@ function Picker<T>({
       <div className="picker-content" ref={rGallery}>
         {options.map((option, i) => (
           <button
+            type="button"
             className={clsx("picker-option", {
               active: value === option.value,
             })}
@@ -171,6 +172,7 @@ export function IconPicker<T>({
     <div>
       <button
         name={group}
+        type="button"
         className={isActive ? "active" : ""}
         aria-label={label}
         onClick={() => setActive(!isActive)}
diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx
index a623891c6b..1ca991c8c5 100644
--- a/packages/excalidraw/components/LayerUI.tsx
+++ b/packages/excalidraw/components/LayerUI.tsx
@@ -555,6 +555,7 @@ const LayerUI = ({
             )}
             {appState.scrolledOutside && (
               <button
+                type="button"
                 className="scroll-back-to-content"
                 onClick={() => {
                   setAppState((appState) => ({
diff --git a/packages/excalidraw/components/MobileMenu.tsx b/packages/excalidraw/components/MobileMenu.tsx
index a243e80279..bd32c77a6e 100644
--- a/packages/excalidraw/components/MobileMenu.tsx
+++ b/packages/excalidraw/components/MobileMenu.tsx
@@ -194,6 +194,7 @@ export const MobileMenu = ({
               !appState.openMenu &&
               !appState.openSidebar && (
                 <button
+                  type="button"
                   className="scroll-back-to-content"
                   onClick={() => {
                     setAppState((appState) => ({
diff --git a/packages/excalidraw/components/PasteChartDialog.tsx b/packages/excalidraw/components/PasteChartDialog.tsx
index f1ee643e44..a04da9a001 100644
--- a/packages/excalidraw/components/PasteChartDialog.tsx
+++ b/packages/excalidraw/components/PasteChartDialog.tsx
@@ -65,6 +65,7 @@ const ChartPreviewBtn = (props: {
 
   return (
     <button
+      type="button"
       className="ChartPreview"
       onClick={() => {
         if (chartElements) {