@sanity/ui 2.0.0-beta.3 → 2.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.4",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./exports/index.ts",

package/src/core/components/menu/__workshop__/selectedItem.tsx

@@ -16,8 +16,10 @@ const POPOVER_PROPS: MenuButtonProps['popover'] = {
   matchReferenceWidth: true,
 }
 
+const INITIAL_INDEX = 1
+
 export default function SelectedItemStory() {
-  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [selectedIndex, setSelectedIndex] = useState(INITIAL_INDEX)
 
   return (
     <Box padding={[4, 5, 6]}>
@@ -26,12 +28,13 @@ export default function SelectedItemStory() {
 
         <MenuButton
           button={<Button text="Open menu" />}
-          id="selected-item-example"
+          id="menu-button"
           menu={
             <Menu>
               <MenuItem
                 icon={SearchIcon}
                 iconRight={selectedIndex === 0 ? CheckmarkIcon : undefined}
+                id="menu-item-1"
                 onClick={() => setSelectedIndex(0)}
                 pressed={selectedIndex === 0}
                 selected={selectedIndex === 0}
@@ -40,6 +43,7 @@ export default function SelectedItemStory() {
               <MenuItem
                 icon={ClockIcon}
                 iconRight={selectedIndex === 1 ? CheckmarkIcon : undefined}
+                id="menu-item-2"
                 onClick={() => setSelectedIndex(1)}
                 pressed={selectedIndex === 1}
                 selected={selectedIndex === 1}
@@ -49,6 +53,7 @@ export default function SelectedItemStory() {
               <MenuItem
                 icon={ExpandIcon}
                 iconRight={selectedIndex === 2 ? CheckmarkIcon : undefined}
+                id="menu-item-3"
                 onClick={() => setSelectedIndex(2)}
                 pressed={selectedIndex === 2}
                 selected={selectedIndex === 2}

package/src/core/components/menu/menuButton.tsx

@@ -99,6 +99,16 @@ export const MenuButton = forwardRef(function MenuButton(
     setShouldFocus(null)
   }, [])
 
+  // Prevent mouse event propagation when the menu is open.
+  // This is to ensure that `handleBlur` isn't triggered when clicking the menu button whilst open,
+  // which can lead to `setOpen` being triggered multiple times (once by `handleBlur`, and again by `handleButtonClick`).
+  const handleMouseDown = useCallback(
+    (event: PointerEvent) => {
+      if (open) event.preventDefault()
+    },
+    [open],
+  )
+
   const handleButtonKeyDown = useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {
     // On `ArrowDown`, `Enter` and `Space`
     // - Opens menu and moves focus to first menuitem
@@ -231,13 +241,14 @@ export const MenuButton = forwardRef(function MenuButton(
             id,
             onClick: handleButtonClick,
             onKeyDown: handleButtonKeyDown,
+            onMouseDown: handleMouseDown,
             'aria-haspopup': true,
             'aria-expanded': open,
             ref: setButtonRef,
             selected: open,
           })
         : null,
-    [buttonProp, handleButtonClick, handleButtonKeyDown, id, open, setButtonRef],
+    [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open, setButtonRef],
   )
 
   const popoverProps: MenuButtonProps['popover'] = useMemo(