Expose close function for Menu and Menu.Item components (#1897)

RobinMalfait · web-flow · commit 83a5f456c3a5 · 2022-10-04T15:49:20.000+02:00
* expose `close` function for `Menu` and `Menu.Item` components

The `Menu` will already automatically close if you invoke the
`Menu.Item` (which is typically an `a` or a `button`). However you have
control over this, so if you add an explicit `onClick={e =&gt;
e.preventDefault()}` then we respect that and don't execute the default
behavior, ergo closing the menu.

The problem occurs when you are using another component like the Inertia
`Link` component, that does have this `e.preventDefault()` built-in to
guarantee SPA-like page transitions without refreshing the browser.
Because of this, the menu will never close (unless you go to a totally
different page where the menu is not present of course).

This is where the explicit `close` function comes in, now you can use
that function to "force" close a menu, if your 3rd party tool already
bypassed the default behaviour.

This API is also how we do it in the `Popover` component for scenario's
where you can't rely on the default behaviour.

* update changelog
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fix `<Popover.Button as={Fragment} />` crash ([#1889](https://github.com/tailwindlabs/headlessui/pull/1889))
+- Expose `close` function for `Menu` and `Menu.Item` components ([#1897](https://github.com/tailwindlabs/headlessui/pull/1897))
 
 ## [1.7.3] - 2022-09-30
 
diff --git a/packages/@headlessui-react/src/components/menu/menu.test.tsx b/packages/@headlessui-react/src/components/menu/menu.test.tsx
@@ -116,6 +116,43 @@ describe('Rendering', () => {
         assertMenu({ state: MenuState.Visible })
       })
     )
+
+    it(
+      'should be possible to manually close the Menu using the exposed close function',
+      suppressConsoleLogs(async () => {
+        render(
+          <Menu>
+            {({ close }) => (
+              <>
+                <Menu.Button>Trigger</Menu.Button>
+                <Menu.Items>
+                  <Menu.Item>
+                    <button
+                      onClick={(e) => {
+                        e.preventDefault()
+                        close()
+                      }}
+                    >
+                      Close
+                    </button>
+                  </Menu.Item>
+                </Menu.Items>
+              </>
+            )}
+          </Menu>
+        )
+
+        assertMenu({ state: MenuState.InvisibleUnmounted })
+
+        await click(getMenuButton())
+
+        assertMenu({ state: MenuState.Visible })
+
+        await click(getByText('Close'))
+
+        assertMenu({ state: MenuState.InvisibleUnmounted })
+      })
+    )
   })
 
   describe('Menu.Button', () => {
@@ -349,6 +386,41 @@ describe('Rendering', () => {
         })
       })
     )
+
+    it(
+      'should be possible to manually close the Menu using the exposed close function',
+      suppressConsoleLogs(async () => {
+        render(
+          <Menu>
+            <Menu.Button>Trigger</Menu.Button>
+            <Menu.Items>
+              <Menu.Item>
+                {({ close }) => (
+                  <button
+                    onClick={(e) => {
+                      e.preventDefault()
+                      close()
+                    }}
+                  >
+                    Close
+                  </button>
+                )}
+              </Menu.Item>
+            </Menu.Items>
+          </Menu>
+        )
+
+        assertMenu({ state: MenuState.InvisibleUnmounted })
+
+        await click(getMenuButton())
+
+        assertMenu({ state: MenuState.Visible })
+
+        await click(getByText('Close'))
+
+        assertMenu({ state: MenuState.InvisibleUnmounted })
+      })
+    )
   })
 
   it('should guarantee the order of DOM nodes when performing actions', async () => {
diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx
@@ -227,6 +227,7 @@ function stateReducer(state: StateDefinition, action: Actions) {
 let DEFAULT_MENU_TAG = Fragment
 interface MenuRenderPropArg {
   open: boolean
+  close: () => void
 }
 
 let MenuRoot = forwardRefWithAs(function Menu<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(
@@ -259,9 +260,13 @@ let MenuRoot = forwardRefWithAs(function Menu<TTag extends ElementType = typeof
     menuState === MenuStates.Open
   )
 
+  let close = useEvent(() => {
+    dispatch({ type: ActionTypes.CloseMenu })
+  })
+
   let slot = useMemo<MenuRenderPropArg>(
-    () => ({ open: menuState === MenuStates.Open }),
-    [menuState]
+    () => ({ open: menuState === MenuStates.Open, close }),
+    [menuState, close]
   )
 
   let theirProps = props
@@ -563,6 +568,7 @@ let DEFAULT_ITEM_TAG = Fragment
 interface ItemRenderPropArg {
   active: boolean
   disabled: boolean
+  close: () => void
 }
 type MenuItemPropsWeControl =
   | 'id'
@@ -613,6 +619,10 @@ let Item = forwardRefWithAs(function Item<TTag extends ElementType = typeof DEFA
     return () => dispatch({ type: ActionTypes.UnregisterItem, id })
   }, [bag, id])
 
+  let close = useEvent(() => {
+    dispatch({ type: ActionTypes.CloseMenu })
+  })
+
   let handleClick = useEvent((event: MouseEvent) => {
     if (disabled) return event.preventDefault()
     dispatch({ type: ActionTypes.CloseMenu })
@@ -641,7 +651,10 @@ let Item = forwardRefWithAs(function Item<TTag extends ElementType = typeof DEFA
     dispatch({ type: ActionTypes.GoToItem, focus: Focus.Nothing })
   })
 
-  let slot = useMemo<ItemRenderPropArg>(() => ({ active, disabled }), [active, disabled])
+  let slot = useMemo<ItemRenderPropArg>(
+    () => ({ active, disabled, close }),
+    [active, disabled, close]
+  )
   let ourProps = {
     id,
     ref: itemRef,
diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Expose `close` function for `Menu` and `MenuItem` components ([#1897](https://github.com/tailwindlabs/headlessui/pull/1897))
 
 ## [1.7.3] - 2022-09-30
 
diff --git a/packages/@headlessui-vue/src/components/menu/menu.test.tsx b/packages/@headlessui-vue/src/components/menu/menu.test.tsx
@@ -193,6 +193,31 @@ describe('Rendering', () => {
         })
       })
     )
+
+    it('should be possible to manually close the Menu using the exposed close function', async () => {
+      renderTemplate({
+        template: jsx`
+          <Menu v-slot="{ close }">
+            <MenuButton>Trigger</MenuButton>
+            <MenuItems>
+              <MenuItem>
+                <button @click.prevent="close">Close</button>
+              </MenuItem>
+            </MenuItems>
+          </Menu>
+        `,
+      })
+
+      assertMenu({ state: MenuState.InvisibleUnmounted })
+
+      await click(getMenuButton())
+
+      assertMenu({ state: MenuState.Visible })
+
+      await click(getByText('Close'))
+
+      assertMenu({ state: MenuState.InvisibleUnmounted })
+    })
   })
 
   describe('MenuButton', () => {
@@ -712,6 +737,31 @@ describe('Rendering', () => {
 
       await click(getMenuButton())
     })
+
+    it('should be possible to manually close the Menu using the exposed close function', async () => {
+      renderTemplate({
+        template: jsx`
+          <Menu>
+            <MenuButton>Trigger</MenuButton>
+            <MenuItems>
+              <MenuItem v-slot="{ close }">
+                <button @click.prevent="close">Close</button>
+              </MenuItem>
+            </MenuItems>
+          </Menu>
+        `,
+      })
+
+      assertMenu({ state: MenuState.InvisibleUnmounted })
+
+      await click(getMenuButton())
+
+      assertMenu({ state: MenuState.Visible })
+
+      await click(getByText('Close'))
+
+      assertMenu({ state: MenuState.InvisibleUnmounted })
+    })
   })
 
   it('should guarantee the order of DOM nodes when performing actions', async () => {
diff --git a/packages/@headlessui-vue/src/components/menu/menu.ts b/packages/@headlessui-vue/src/components/menu/menu.ts
@@ -234,7 +234,7 @@ export let Menu = defineComponent({
     )
 
     return () => {
-      let slot = { open: menuState.value === MenuStates.Open }
+      let slot = { open: menuState.value === MenuStates.Open, close: api.closeMenu }
       return render({ ourProps: {}, theirProps: props, slot, slots, attrs, name: 'Menu' })
     }
   },
@@ -554,7 +554,7 @@ export let MenuItem = defineComponent({
 
     return () => {
       let { disabled } = props
-      let slot = { active: active.value, disabled }
+      let slot = { active: active.value, disabled, close: api.closeMenu }
       let ourProps = {
         id,
         ref: internalItemRef,
