fix: menu: add htmltype prop to menu item button (#654)

* fix: menu: add htmltype prop to menu item button * chore: menu: update snaps to account for new default property
EightfoldAI · Jun 26, 2023 · 9a6141a · 9a6141a
1 parent b810ba8
commit 9a6141a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/src/components/Menu/MenuItem/MenuItem.types.ts b/src/components/Menu/MenuItem/MenuItem.types.ts
@@ -85,6 +85,11 @@ export interface MenuItemButtonProps
    * The nested dropdown menu props
    */
   dropdownMenuProps?: NestedDropdownMenuProps;
+  /**
+   * The button html type.
+   * @default 'button'
+   */
+  htmlType?: 'button' | 'submit' | 'reset';
   /**
    * Menu item icon props
    */

diff --git a/src/components/Menu/MenuItem/MenuItemButton/MenuItemButton.tsx b/src/components/Menu/MenuItem/MenuItemButton/MenuItemButton.tsx
@@ -17,6 +17,7 @@ export const MenuItemButton: FC<MenuItemButtonProps> = ({
   disabled,
   dropdownMenuItems,
   dropdownMenuProps,
+  htmlType = 'button',
   iconProps,
   onClick,
   role = 'menuitem',
@@ -85,6 +86,7 @@ export const MenuItemButton: FC<MenuItemButtonProps> = ({
       className={styles.menuItemButton}
       disabled={disabled}
       tabIndex={tabIndex}
+      type={htmlType}
       {...rest}
       onClick={handleOnClick}
       role={role}
@@ -108,6 +110,7 @@ export const MenuItemButton: FC<MenuItemButtonProps> = ({
           className={styles.menuOuterButton}
           disabled={disabled}
           tabIndex={tabIndex}
+          type={htmlType}
           {...rest}
           onClick={handleOnClick}
         >

diff --git a/src/components/Menu/__snapshots__/Menu.test.tsx.snap b/src/components/Menu/__snapshots__/Menu.test.tsx.snap
@@ -43,6 +43,7 @@ exports[`Menu Menu is large 1`] = `
               class="menu-item-button"
               role="menuitem"
               tabindex="0"
+              type="button"
             >
               <span
                 aria-hidden="false"
@@ -86,6 +87,7 @@ exports[`Menu Menu is large 1`] = `
               disabled=""
               role="menuitem"
               tabindex="0"
+              type="button"
             >
               <span
                 class="menu-item-wrapper"
@@ -272,6 +274,7 @@ exports[`Menu Menu is medium 1`] = `
               class="menu-item-button"
               role="menuitem"
               tabindex="0"
+              type="button"
             >
               <span
                 aria-hidden="false"
@@ -315,6 +318,7 @@ exports[`Menu Menu is medium 1`] = `
               disabled=""
               role="menuitem"
               tabindex="0"
+              type="button"
             >
               <span
                 class="menu-item-wrapper"
@@ -501,6 +505,7 @@ exports[`Menu Menu is small 1`] = `
               class="menu-item-button"
               role="menuitem"
               tabindex="0"
+              type="button"
             >
               <span
                 aria-hidden="false"
@@ -544,6 +549,7 @@ exports[`Menu Menu is small 1`] = `
               disabled=""
               role="menuitem"
               tabindex="0"
+              type="button"
             >
               <span
                 class="menu-item-wrapper"