From c1117840fda78cd088ff28ac26305f081ce33fae Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 2 Aug 2021 13:57:58 +0200
Subject: [PATCH 1/4] Only add `type=button` for real buttons (#709)

* add `{type:'button'}` only for buttons

We will try and infer the type based on the passed in `props.as` prop or
the default tag. However, when somebody uses `as={CustomComponent}` then
we don't know what it will render. Therefore we have to pass it a ref
and check if the final result is a button or not. If it is, and it
doesn't have a `type` yet, then we can set the `type` correctly.

* update changelog
---
 CHANGELOG.md                                  |  8 +-
 .../components/disclosure/disclosure.test.tsx | 62 +++++++++++-
 .../src/components/disclosure/disclosure.tsx  | 10 +-
 .../src/components/listbox/listbox.test.tsx   | 60 ++++++++++++
 .../src/components/listbox/listbox.tsx        |  3 +-
 .../src/components/menu/menu.test.tsx         | 59 +++++++++++
 .../src/components/menu/menu.tsx              |  3 +-
 .../src/components/popover/popover.test.tsx   | 62 +++++++++++-
 .../src/components/popover/popover.tsx        |  8 +-
 .../src/components/switch/switch.test.tsx     | 60 ++++++++++++
 .../src/components/switch/switch.tsx          | 15 ++-
 .../src/components/tabs/tabs.test.tsx         | 72 ++++++++++++++
 .../src/components/tabs/tabs.tsx              |  5 +-
 .../src/hooks/use-resolve-button-type.ts      | 34 +++++++
 .../src/hooks/use-sync-refs.ts                |  2 +-
 .../test-utils/accessibility-assertions.ts    |  4 +-
 .../components/disclosure/disclosure.test.ts  | 94 +++++++++++++++++-
 .../src/components/disclosure/disclosure.ts   | 33 ++++++-
 .../src/components/listbox/listbox.test.tsx   | 97 ++++++++++++++++++-
 .../src/components/listbox/listbox.ts         | 17 +++-
 .../src/components/menu/menu.test.tsx         | 90 +++++++++++++++++
 .../src/components/menu/menu.ts               | 17 +++-
 .../src/components/popover/popover.test.ts    | 92 +++++++++++++++++-
 .../src/components/popover/popover.ts         | 23 ++++-
 .../src/components/switch/switch.test.tsx     | 90 ++++++++++++++++-
 .../src/components/switch/switch.ts           | 22 +++--
 .../src/hooks/use-resolve-button-type.ts      | 33 +++++++
 .../test-utils/accessibility-assertions.ts    |  4 +-
 28 files changed, 1026 insertions(+), 53 deletions(-)
 create mode 100644 packages/@headlessui-react/src/hooks/use-resolve-button-type.ts
 create mode 100644 packages/@headlessui-vue/src/hooks/use-resolve-button-type.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3c631d366e..a34b450b19 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,11 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased - React]
 
-- Nothing yet!
+### Fixes
+
+- Only add `type=button` to real buttons ([#709](https://github.com/tailwindlabs/headlessui/pull/709))
 
 ## [Unreleased - Vue]
 
-- Nothing yet!
+### Fixes
+
+- Only add `type=button` to real buttons ([#709](https://github.com/tailwindlabs/headlessui/pull/709))
 
 ## [@headlessui/react@v1.4.0] - 2021-07-29
 
diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx
index a6528a2d6d..6c72cff4e1 100644
--- a/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx
+++ b/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx
@@ -20,7 +20,7 @@ jest.mock('../../hooks/use-id')
 afterAll(() => jest.restoreAllMocks())
 
 function nextFrame() {
-  return new Promise(resolve => {
+  return new Promise<void>(resolve => {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         resolve()
@@ -296,6 +296,66 @@ describe('Rendering', () => {
         assertDisclosurePanel({ state: DisclosureState.Visible })
       })
     )
+
+    describe('`type` attribute', () => {
+      it('should set the `type` to "button" by default', async () => {
+        render(
+          <Disclosure>
+            <Disclosure.Button>Trigger</Disclosure.Button>
+          </Disclosure>
+        )
+
+        expect(getDisclosureButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the `type` to "button" if it already contains a `type`', async () => {
+        render(
+          <Disclosure>
+            <Disclosure.Button type="submit">Trigger</Disclosure.Button>
+          </Disclosure>
+        )
+
+        expect(getDisclosureButton()).toHaveAttribute('type', 'submit')
+      })
+
+      it('should set the `type` to "button" when using the `as` prop which resolves to a "button"', async () => {
+        let CustomButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
+          <button ref={ref} {...props} />
+        ))
+
+        render(
+          <Disclosure>
+            <Disclosure.Button as={CustomButton}>Trigger</Disclosure.Button>
+          </Disclosure>
+        )
+
+        expect(getDisclosureButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the type if the "as" prop is not a "button"', async () => {
+        render(
+          <Disclosure>
+            <Disclosure.Button as="div">Trigger</Disclosure.Button>
+          </Disclosure>
+        )
+
+        expect(getDisclosureButton()).not.toHaveAttribute('type')
+      })
+
+      it('should not set the `type` to "button" when using the `as` prop which resolves to a "div"', async () => {
+        let CustomButton = React.forwardRef<HTMLDivElement>((props, ref) => (
+          <div ref={ref} {...props} />
+        ))
+
+        render(
+          <Disclosure>
+            <Disclosure.Button as={CustomButton}>Trigger</Disclosure.Button>
+          </Disclosure>
+        )
+
+        expect(getDisclosureButton()).not.toHaveAttribute('type')
+      })
+    })
   })
 
   describe('Disclosure.Panel', () => {
diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
index 9033ee6734..8b73c5a6e6 100644
--- a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
+++ b/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
@@ -7,6 +7,7 @@ import React, {
   useEffect,
   useMemo,
   useReducer,
+  useRef,
 
   // Types
   Dispatch,
@@ -26,6 +27,7 @@ import { useId } from '../../hooks/use-id'
 import { Keys } from '../keyboard'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
 import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 
 enum DisclosureStates {
   Open,
@@ -226,7 +228,8 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
   ref: Ref<HTMLButtonElement>
 ) {
   let [state, dispatch] = useDisclosureContext([Disclosure.name, Button.name].join('.'))
-  let buttonRef = useSyncRefs(ref)
+  let internalButtonRef = useRef<HTMLButtonElement | null>(null)
+  let buttonRef = useSyncRefs(internalButtonRef, ref)
 
   let panelContext = useDisclosurePanelContext()
   let isWithinPanel = panelContext === null ? false : panelContext === state.panelId
@@ -290,13 +293,14 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
     [state]
   )
 
+  let type = useResolveButtonType(props, internalButtonRef)
   let passthroughProps = props
   let propsWeControl = isWithinPanel
-    ? { type: 'button', onKeyDown: handleKeyDown, onClick: handleClick }
+    ? { ref: buttonRef, type, onKeyDown: handleKeyDown, onClick: handleClick }
     : {
         ref: buttonRef,
         id: state.buttonId,
-        type: 'button',
+        type,
         'aria-expanded': props.disabled
           ? undefined
           : state.disclosureState === DisclosureStates.Open,
diff --git a/packages/@headlessui-react/src/components/listbox/listbox.test.tsx b/packages/@headlessui-react/src/components/listbox/listbox.test.tsx
index bb232a0c63..70b304c36c 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.test.tsx
+++ b/packages/@headlessui-react/src/components/listbox/listbox.test.tsx
@@ -326,6 +326,66 @@ describe('Rendering', () => {
         assertListboxButtonLinkedWithListboxLabel()
       })
     )
+
+    describe('`type` attribute', () => {
+      it('should set the `type` to "button" by default', async () => {
+        render(
+          <Listbox value={null} onChange={console.log}>
+            <Listbox.Button>Trigger</Listbox.Button>
+          </Listbox>
+        )
+
+        expect(getListboxButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the `type` to "button" if it already contains a `type`', async () => {
+        render(
+          <Listbox value={null} onChange={console.log}>
+            <Listbox.Button type="submit">Trigger</Listbox.Button>
+          </Listbox>
+        )
+
+        expect(getListboxButton()).toHaveAttribute('type', 'submit')
+      })
+
+      it('should set the `type` to "button" when using the `as` prop which resolves to a "button"', async () => {
+        let CustomButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
+          <button ref={ref} {...props} />
+        ))
+
+        render(
+          <Listbox value={null} onChange={console.log}>
+            <Listbox.Button as={CustomButton}>Trigger</Listbox.Button>
+          </Listbox>
+        )
+
+        expect(getListboxButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the type if the "as" prop is not a "button"', async () => {
+        render(
+          <Listbox value={null} onChange={console.log}>
+            <Listbox.Button as="div">Trigger</Listbox.Button>
+          </Listbox>
+        )
+
+        expect(getListboxButton()).not.toHaveAttribute('type')
+      })
+
+      it('should not set the `type` to "button" when using the `as` prop which resolves to a "div"', async () => {
+        let CustomButton = React.forwardRef<HTMLDivElement>((props, ref) => (
+          <div ref={ref} {...props} />
+        ))
+
+        render(
+          <Listbox value={null} onChange={console.log}>
+            <Listbox.Button as={CustomButton}>Trigger</Listbox.Button>
+          </Listbox>
+        )
+
+        expect(getListboxButton()).not.toHaveAttribute('type')
+      })
+    })
   })
 
   describe('Listbox.Options', () => {
diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
index 10b0e39b1c..7fe3fb2b49 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.tsx
+++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -32,6 +32,7 @@ import { isDisabledReactIssue7711 } from '../../utils/bugs'
 import { isFocusableElement, FocusableMode } from '../../utils/focus-management'
 import { useWindowEvent } from '../../hooks/use-window-event'
 import { useOpenClosed, State, OpenClosedProvider } from '../../internal/open-closed'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 
 enum ListboxStates {
   Open,
@@ -370,7 +371,7 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
   let propsWeControl = {
     ref: buttonRef,
     id,
-    type: 'button',
+    type: useResolveButtonType(props, state.buttonRef),
     'aria-haspopup': true,
     'aria-controls': state.optionsRef.current?.id,
     'aria-expanded': state.disabled ? undefined : state.listboxState === ListboxStates.Open,
diff --git a/packages/@headlessui-react/src/components/menu/menu.test.tsx b/packages/@headlessui-react/src/components/menu/menu.test.tsx
index 3f37c63747..4bf3399e4c 100644
--- a/packages/@headlessui-react/src/components/menu/menu.test.tsx
+++ b/packages/@headlessui-react/src/components/menu/menu.test.tsx
@@ -184,6 +184,65 @@ describe('Rendering', () => {
         assertMenu({ state: MenuState.Visible })
       })
     )
+    describe('`type` attribute', () => {
+      it('should set the `type` to "button" by default', async () => {
+        render(
+          <Menu>
+            <Menu.Button>Trigger</Menu.Button>
+          </Menu>
+        )
+
+        expect(getMenuButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the `type` to "button" if it already contains a `type`', async () => {
+        render(
+          <Menu>
+            <Menu.Button type="submit">Trigger</Menu.Button>
+          </Menu>
+        )
+
+        expect(getMenuButton()).toHaveAttribute('type', 'submit')
+      })
+
+      it('should set the `type` to "button" when using the `as` prop which resolves to a "button"', async () => {
+        let CustomButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
+          <button ref={ref} {...props} />
+        ))
+
+        render(
+          <Menu>
+            <Menu.Button as={CustomButton}>Trigger</Menu.Button>
+          </Menu>
+        )
+
+        expect(getMenuButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the type if the "as" prop is not a "button"', async () => {
+        render(
+          <Menu>
+            <Menu.Button as="div">Trigger</Menu.Button>
+          </Menu>
+        )
+
+        expect(getMenuButton()).not.toHaveAttribute('type')
+      })
+
+      it('should not set the `type` to "button" when using the `as` prop which resolves to a "div"', async () => {
+        let CustomButton = React.forwardRef<HTMLDivElement>((props, ref) => (
+          <div ref={ref} {...props} />
+        ))
+
+        render(
+          <Menu>
+            <Menu.Button as={CustomButton}>Trigger</Menu.Button>
+          </Menu>
+        )
+
+        expect(getMenuButton()).not.toHaveAttribute('type')
+      })
+    })
   })
 
   describe('Menu.Items', () => {
diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx
index 99f3e496ca..1d51ca27c7 100644
--- a/packages/@headlessui-react/src/components/menu/menu.tsx
+++ b/packages/@headlessui-react/src/components/menu/menu.tsx
@@ -34,6 +34,7 @@ import { isFocusableElement, FocusableMode } from '../../utils/focus-management'
 import { useWindowEvent } from '../../hooks/use-window-event'
 import { useTreeWalker } from '../../hooks/use-tree-walker'
 import { useOpenClosed, State, OpenClosedProvider } from '../../internal/open-closed'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 
 enum MenuStates {
   Open,
@@ -294,7 +295,7 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
   let propsWeControl = {
     ref: buttonRef,
     id,
-    type: 'button',
+    type: useResolveButtonType(props, state.buttonRef),
     'aria-haspopup': true,
     'aria-controls': state.itemsRef.current?.id,
     'aria-expanded': props.disabled ? undefined : state.menuState === MenuStates.Open,
diff --git a/packages/@headlessui-react/src/components/popover/popover.test.tsx b/packages/@headlessui-react/src/components/popover/popover.test.tsx
index a5979ea44d..3df9c9b630 100644
--- a/packages/@headlessui-react/src/components/popover/popover.test.tsx
+++ b/packages/@headlessui-react/src/components/popover/popover.test.tsx
@@ -23,7 +23,7 @@ jest.mock('../../hooks/use-id')
 afterAll(() => jest.restoreAllMocks())
 
 function nextFrame() {
-  return new Promise(resolve => {
+  return new Promise<void>(resolve => {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         resolve()
@@ -319,6 +319,66 @@ describe('Rendering', () => {
         assertPopoverPanel({ state: PopoverState.Visible })
       })
     )
+
+    describe('`type` attribute', () => {
+      it('should set the `type` to "button" by default', async () => {
+        render(
+          <Popover>
+            <Popover.Button>Trigger</Popover.Button>
+          </Popover>
+        )
+
+        expect(getPopoverButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the `type` to "button" if it already contains a `type`', async () => {
+        render(
+          <Popover>
+            <Popover.Button type="submit">Trigger</Popover.Button>
+          </Popover>
+        )
+
+        expect(getPopoverButton()).toHaveAttribute('type', 'submit')
+      })
+
+      it('should set the `type` to "button" when using the `as` prop which resolves to a "button"', async () => {
+        let CustomButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
+          <button ref={ref} {...props} />
+        ))
+
+        render(
+          <Popover>
+            <Popover.Button as={CustomButton}>Trigger</Popover.Button>
+          </Popover>
+        )
+
+        expect(getPopoverButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the type if the "as" prop is not a "button"', async () => {
+        render(
+          <Popover>
+            <Popover.Button as="div">Trigger</Popover.Button>
+          </Popover>
+        )
+
+        expect(getPopoverButton()).not.toHaveAttribute('type')
+      })
+
+      it('should not set the `type` to "button" when using the `as` prop which resolves to a "div"', async () => {
+        let CustomButton = React.forwardRef<HTMLDivElement>((props, ref) => (
+          <div ref={ref} {...props} />
+        ))
+
+        render(
+          <Popover>
+            <Popover.Button as={CustomButton}>Trigger</Popover.Button>
+          </Popover>
+        )
+
+        expect(getPopoverButton()).not.toHaveAttribute('type')
+      })
+    })
   })
 
   describe('Popover.Panel', () => {
diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
index 15bebf215d..30c4a03ed2 100644
--- a/packages/@headlessui-react/src/components/popover/popover.tsx
+++ b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -35,6 +35,7 @@ import {
 } from '../../utils/focus-management'
 import { useWindowEvent } from '../../hooks/use-window-event'
 import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 
 enum PopoverStates {
   Open,
@@ -309,6 +310,7 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
     ref,
     isWithinPanel ? null : button => dispatch({ type: ActionTypes.SetButton, button })
   )
+  let withinPanelButtonRef = useSyncRefs(internalButtonRef, ref)
 
   // TODO: Revisit when handling Tab/Shift+Tab when using Portal's
   let activeElementRef = useRef<Element | null>(null)
@@ -468,17 +470,19 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
     [state]
   )
 
+  let type = useResolveButtonType(props, internalButtonRef)
   let passthroughProps = props
   let propsWeControl = isWithinPanel
     ? {
-        type: 'button',
+        ref: withinPanelButtonRef,
+        type,
         onKeyDown: handleKeyDown,
         onClick: handleClick,
       }
     : {
         ref: buttonRef,
         id: state.buttonId,
-        type: 'button',
+        type,
         'aria-expanded': props.disabled ? undefined : state.popoverState === PopoverStates.Open,
         'aria-controls': state.panel ? state.panelId : undefined,
         onKeyDown: handleKeyDown,
diff --git a/packages/@headlessui-react/src/components/switch/switch.test.tsx b/packages/@headlessui-react/src/components/switch/switch.test.tsx
index 28d350d3be..d566a48261 100644
--- a/packages/@headlessui-react/src/components/switch/switch.test.tsx
+++ b/packages/@headlessui-react/src/components/switch/switch.test.tsx
@@ -58,6 +58,66 @@ describe('Rendering', () => {
     )
     assertSwitch({ state: SwitchState.Off, label: 'Enable notifications' })
   })
+
+  describe('`type` attribute', () => {
+    it('should set the `type` to "button" by default', async () => {
+      render(
+        <Switch checked={false} onChange={console.log}>
+          Trigger
+        </Switch>
+      )
+
+      expect(getSwitch()).toHaveAttribute('type', 'button')
+    })
+
+    it('should not set the `type` to "button" if it already contains a `type`', async () => {
+      render(
+        <Switch checked={false} onChange={console.log} type="submit">
+          Trigger
+        </Switch>
+      )
+
+      expect(getSwitch()).toHaveAttribute('type', 'submit')
+    })
+
+    it('should set the `type` to "button" when using the `as` prop which resolves to a "button"', async () => {
+      let CustomButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
+        <button ref={ref} {...props} />
+      ))
+
+      render(
+        <Switch checked={false} onChange={console.log} as={CustomButton}>
+          Trigger
+        </Switch>
+      )
+
+      expect(getSwitch()).toHaveAttribute('type', 'button')
+    })
+
+    it('should not set the type if the "as" prop is not a "button"', async () => {
+      render(
+        <Switch checked={false} onChange={console.log} as="div">
+          Trigger
+        </Switch>
+      )
+
+      expect(getSwitch()).not.toHaveAttribute('type')
+    })
+
+    it('should not set the `type` to "button" when using the `as` prop which resolves to a "div"', async () => {
+      let CustomButton = React.forwardRef<HTMLDivElement>((props, ref) => (
+        <div ref={ref} {...props} />
+      ))
+
+      render(
+        <Switch checked={false} onChange={console.log} as={CustomButton}>
+          Trigger
+        </Switch>
+      )
+
+      expect(getSwitch()).not.toHaveAttribute('type')
+    })
+  })
 })
 
 describe('Render composition', () => {
diff --git a/packages/@headlessui-react/src/components/switch/switch.tsx b/packages/@headlessui-react/src/components/switch/switch.tsx
index 99d60d5b46..a2a5cebedd 100644
--- a/packages/@headlessui-react/src/components/switch/switch.tsx
+++ b/packages/@headlessui-react/src/components/switch/switch.tsx
@@ -10,6 +10,7 @@ import React, {
   ElementType,
   KeyboardEvent as ReactKeyboardEvent,
   MouseEvent as ReactMouseEvent,
+  useRef,
 } from 'react'
 
 import { Props } from '../../types'
@@ -19,6 +20,8 @@ import { Keys } from '../keyboard'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
 import { Label, useLabels } from '../label/label'
 import { Description, useDescriptions } from '../description/description'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
+import { useSyncRefs } from '../../hooks/use-sync-refs'
 
 interface StateDefinition {
   switch: HTMLButtonElement | null
@@ -90,6 +93,11 @@ export function Switch<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
   let { checked, onChange, ...passThroughProps } = props
   let id = `headlessui-switch-${useId()}`
   let groupContext = useContext(GroupContext)
+  let internalSwitchRef = useRef<HTMLButtonElement | null>(null)
+  let switchRef = useSyncRefs(
+    internalSwitchRef,
+    groupContext === null ? null : groupContext.setSwitch
+  )
 
   let toggle = useCallback(() => onChange(!checked), [onChange, checked])
   let handleClick = useCallback(
@@ -117,8 +125,9 @@ export function Switch<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
   let slot = useMemo<SwitchRenderPropArg>(() => ({ checked }), [checked])
   let propsWeControl = {
     id,
-    ref: groupContext === null ? undefined : groupContext.setSwitch,
+    ref: switchRef,
     role: 'switch',
+    type: useResolveButtonType(props, internalSwitchRef),
     tabIndex: 0,
     'aria-checked': checked,
     'aria-labelledby': groupContext?.labelledby,
@@ -128,10 +137,6 @@ export function Switch<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
     onKeyPress: handleKeyPress,
   }
 
-  if (passThroughProps.as === 'button') {
-    Object.assign(propsWeControl, { type: 'button' })
-  }
-
   return render({
     props: { ...passThroughProps, ...propsWeControl },
     slot,
diff --git a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx b/packages/@headlessui-react/src/components/tabs/tabs.test.tsx
index c9214ab3fd..2125583c00 100644
--- a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx
+++ b/packages/@headlessui-react/src/components/tabs/tabs.test.tsx
@@ -416,6 +416,78 @@ describe('Rendering', () => {
       assertActiveElement(getByText('Tab 1'))
     })
   })
+
+  describe(`'Tab'`, () => {
+    describe('`type` attribute', () => {
+      it('should set the `type` to "button" by default', async () => {
+        render(
+          <Tab.Group>
+            <Tab.List>
+              <Tab>Trigger</Tab>
+            </Tab.List>
+          </Tab.Group>
+        )
+
+        expect(getTabs()[0]).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the `type` to "button" if it already contains a `type`', async () => {
+        render(
+          <Tab.Group>
+            <Tab.List>
+              <Tab type="submit">Trigger</Tab>
+            </Tab.List>
+          </Tab.Group>
+        )
+
+        expect(getTabs()[0]).toHaveAttribute('type', 'submit')
+      })
+
+      it('should set the `type` to "button" when using the `as` prop which resolves to a "button"', async () => {
+        let CustomButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
+          <button ref={ref} {...props} />
+        ))
+
+        render(
+          <Tab.Group>
+            <Tab.List>
+              <Tab as={CustomButton}>Trigger</Tab>
+            </Tab.List>
+          </Tab.Group>
+        )
+
+        expect(getTabs()[0]).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the type if the "as" prop is not a "button"', async () => {
+        render(
+          <Tab.Group>
+            <Tab.List>
+              <Tab as="div">Trigger</Tab>
+            </Tab.List>
+          </Tab.Group>
+        )
+
+        expect(getTabs()[0]).not.toHaveAttribute('type')
+      })
+
+      it('should not set the `type` to "button" when using the `as` prop which resolves to a "div"', async () => {
+        let CustomButton = React.forwardRef<HTMLDivElement>((props, ref) => (
+          <div ref={ref} {...props} />
+        ))
+
+        render(
+          <Tab.Group>
+            <Tab.List>
+              <Tab as={CustomButton}>Trigger</Tab>
+            </Tab.List>
+          </Tab.Group>
+        )
+
+        expect(getTabs()[0]).not.toHaveAttribute('type')
+      })
+    })
+  })
 })
 
 describe('Keyboard interactions', () => {
diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx
index d5c2e8322a..d90cfe385a 100644
--- a/packages/@headlessui-react/src/components/tabs/tabs.tsx
+++ b/packages/@headlessui-react/src/components/tabs/tabs.tsx
@@ -24,6 +24,7 @@ import { Keys } from '../../components/keyboard'
 import { focusIn, Focus } from '../../utils/focus-management'
 import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
 import { useSyncRefs } from '../../hooks/use-sync-refs'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 
 interface StateDefinition {
   selectedIndex: number | null
@@ -332,8 +333,6 @@ export function Tab<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(
     change(myIndex)
   }, [change, myIndex, internalTabRef])
 
-  let type = props?.type ?? (props.as || DEFAULT_TAB_TAG) === 'button' ? 'button' : undefined
-
   let slot = useMemo(() => ({ selected }), [selected])
   let propsWeControl = {
     ref: tabRef,
@@ -342,7 +341,7 @@ export function Tab<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(
     onClick: handleSelection,
     id,
     role: 'tab',
-    type,
+    type: useResolveButtonType(props, internalTabRef),
     'aria-controls': panels[myIndex]?.current?.id,
     'aria-selected': selected,
     tabIndex: selected ? 0 : -1,
diff --git a/packages/@headlessui-react/src/hooks/use-resolve-button-type.ts b/packages/@headlessui-react/src/hooks/use-resolve-button-type.ts
new file mode 100644
index 0000000000..f5a6cd297a
--- /dev/null
+++ b/packages/@headlessui-react/src/hooks/use-resolve-button-type.ts
@@ -0,0 +1,34 @@
+import { useState, MutableRefObject } from 'react'
+
+import { useIsoMorphicEffect } from './use-iso-morphic-effect'
+
+function resolveType<TTag>(props: { type?: string; as?: TTag }) {
+  if (props.type) return props.type
+
+  let tag = props.as ?? 'button'
+  if (typeof tag === 'string' && tag.toLowerCase() === 'button') return 'button'
+
+  return undefined
+}
+
+export function useResolveButtonType<TTag>(
+  props: { type?: string; as?: TTag },
+  ref: MutableRefObject<HTMLElement | null>
+) {
+  let [type, setType] = useState(() => resolveType(props))
+
+  useIsoMorphicEffect(() => {
+    setType(resolveType(props))
+  }, [props.type, props.as])
+
+  useIsoMorphicEffect(() => {
+    if (type) return
+    if (!ref.current) return
+
+    if (ref.current instanceof HTMLButtonElement && !ref.current.hasAttribute('type')) {
+      setType('button')
+    }
+  }, [type, ref])
+
+  return type
+}
diff --git a/packages/@headlessui-react/src/hooks/use-sync-refs.ts b/packages/@headlessui-react/src/hooks/use-sync-refs.ts
index 5a072c4f01..4d11ebad6f 100644
--- a/packages/@headlessui-react/src/hooks/use-sync-refs.ts
+++ b/packages/@headlessui-react/src/hooks/use-sync-refs.ts
@@ -1,7 +1,7 @@
 import { useRef, useEffect, useCallback } from 'react'
 
 export function useSyncRefs<TType>(
-  ...refs: (React.MutableRefObject<TType> | ((instance: TType) => void) | null)[]
+  ...refs: (React.MutableRefObject<TType | null> | ((instance: TType) => void) | null)[]
 ) {
   let cache = useRef(refs)
 
diff --git a/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts b/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts
index 5a6fb38a87..6e434b3469 100644
--- a/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts
+++ b/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts
@@ -7,7 +7,7 @@ function assertNever(x: never): never {
 // ---
 
 export function getMenuButton(): HTMLElement | null {
-  return document.querySelector('button,[role="button"]')
+  return document.querySelector('button,[role="button"],[id^="headlessui-menu-button-"]')
 }
 
 export function getMenuButtons(): HTMLElement[] {
@@ -226,7 +226,7 @@ export function getListboxLabel(): HTMLElement | null {
 }
 
 export function getListboxButton(): HTMLElement | null {
-  return document.querySelector('button,[role="button"]')
+  return document.querySelector('button,[role="button"],[id^="headlessui-listbox-button-"]')
 }
 
 export function getListboxButtons(): HTMLElement[] {
diff --git a/packages/@headlessui-vue/src/components/disclosure/disclosure.test.ts b/packages/@headlessui-vue/src/components/disclosure/disclosure.test.ts
index fc3df40a25..415513357b 100644
--- a/packages/@headlessui-vue/src/components/disclosure/disclosure.test.ts
+++ b/packages/@headlessui-vue/src/components/disclosure/disclosure.test.ts
@@ -1,4 +1,4 @@
-import { defineComponent, nextTick, ref, watch } from 'vue'
+import { defineComponent, nextTick, ref, watch, h } from 'vue'
 import { render } from '../../test-utils/vue-testing-library'
 import { Disclosure, DisclosureButton, DisclosurePanel } from './disclosure'
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
@@ -291,6 +291,98 @@ describe('Rendering', () => {
         assertDisclosurePanel({ state: DisclosureState.Visible })
       })
     )
+
+    describe('`type` attribute', () => {
+      it('should set the `type` to "button" by default', async () => {
+        renderTemplate(
+          html`
+            <Disclosure>
+              <DisclosureButton>
+                Trigger
+              </DisclosureButton>
+            </Disclosure>
+          `
+        )
+
+        expect(getDisclosureButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the `type` to "button" if it already contains a `type`', async () => {
+        renderTemplate(
+          html`
+            <Disclosure>
+              <DisclosureButton type="submit">
+                Trigger
+              </DisclosureButton>
+            </Disclosure>
+          `
+        )
+
+        expect(getDisclosureButton()).toHaveAttribute('type', 'submit')
+      })
+
+      it(
+        'should set the `type` to "button" when using the `as` prop which resolves to a "button"',
+        suppressConsoleLogs(async () => {
+          renderTemplate({
+            template: html`
+              <Disclosure>
+                <DisclosureButton :as="CustomButton">
+                  Trigger
+                </DisclosureButton>
+              </Disclosure>
+            `,
+            setup: () => ({
+              CustomButton: defineComponent({
+                setup: props => () => h('button', { ...props }),
+              }),
+            }),
+          })
+
+          await new Promise(requestAnimationFrame)
+
+          expect(getDisclosureButton()).toHaveAttribute('type', 'button')
+        })
+      )
+
+      it('should not set the type if the "as" prop is not a "button"', async () => {
+        renderTemplate(
+          html`
+            <Disclosure>
+              <DisclosureButton as="div">
+                Trigger
+              </DisclosureButton>
+            </Disclosure>
+          `
+        )
+
+        expect(getDisclosureButton()).not.toHaveAttribute('type')
+      })
+
+      it(
+        'should not set the `type` to "button" when using the `as` prop which resolves to a "div"',
+        suppressConsoleLogs(async () => {
+          renderTemplate({
+            template: html`
+              <Disclosure>
+                <DisclosureButton :as="CustomButton">
+                  Trigger
+                </DisclosureButton>
+              </Disclosure>
+            `,
+            setup: () => ({
+              CustomButton: defineComponent({
+                setup: props => () => h('div', props),
+              }),
+            }),
+          })
+
+          await new Promise(requestAnimationFrame)
+
+          expect(getDisclosureButton()).not.toHaveAttribute('type')
+        })
+      )
+    })
   })
 
   describe('DisclosurePanel', () => {
diff --git a/packages/@headlessui-vue/src/components/disclosure/disclosure.ts b/packages/@headlessui-vue/src/components/disclosure/disclosure.ts
index e8cc87da5f..23fe0a3f18 100644
--- a/packages/@headlessui-vue/src/components/disclosure/disclosure.ts
+++ b/packages/@headlessui-vue/src/components/disclosure/disclosure.ts
@@ -1,5 +1,14 @@
 // WAI-ARIA: https://www.w3.org/TR/wai-aria-practices-1.2/#disclosure
-import { defineComponent, ref, provide, inject, InjectionKey, Ref, computed } from 'vue'
+import {
+  defineComponent,
+  ref,
+  provide,
+  inject,
+  InjectionKey,
+  Ref,
+  computed,
+  watchEffect,
+} from 'vue'
 
 import { Keys } from '../../keyboard'
 import { match } from '../../utils/match'
@@ -7,6 +16,7 @@ import { render, Features } from '../../utils/render'
 import { useId } from '../../hooks/use-id'
 import { dom } from '../../utils/dom'
 import { useOpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 
 enum DisclosureStates {
   Open,
@@ -129,14 +139,15 @@ export let DisclosureButton = defineComponent({
     let slot = { open: api.disclosureState.value === DisclosureStates.Open }
     let propsWeControl = this.isWithinPanel
       ? {
-          type: 'button',
+          ref: 'el',
+          type: this.type,
           onClick: this.handleClick,
           onKeydown: this.handleKeyDown,
         }
       : {
           id: this.id,
           ref: 'el',
-          type: 'button',
+          type: this.type,
           'aria-expanded': this.$props.disabled
             ? undefined
             : api.disclosureState.value === DisclosureStates.Open,
@@ -155,16 +166,28 @@ export let DisclosureButton = defineComponent({
       name: 'DisclosureButton',
     })
   },
-  setup(props) {
+  setup(props, { attrs }) {
     let api = useDisclosureContext('DisclosureButton')
 
     let panelContext = useDisclosurePanelContext()
     let isWithinPanel = panelContext === null ? false : panelContext === api.panelId
 
+    let elementRef = ref(null)
+
+    if (!isWithinPanel) {
+      watchEffect(() => {
+        api.button.value = elementRef.value
+      })
+    }
+
     return {
       isWithinPanel,
       id: api.buttonId,
-      el: isWithinPanel ? undefined : api.button,
+      el: elementRef,
+      type: useResolveButtonType(
+        computed(() => ({ as: props.as, type: attrs.type })),
+        elementRef
+      ),
       handleClick() {
         if (props.disabled) return
 
diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.test.tsx b/packages/@headlessui-vue/src/components/listbox/listbox.test.tsx
index a67db2630f..1feee6bbf5 100644
--- a/packages/@headlessui-vue/src/components/listbox/listbox.test.tsx
+++ b/packages/@headlessui-vue/src/components/listbox/listbox.test.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, nextTick, ref, watch } from 'vue'
+import { defineComponent, nextTick, ref, watch, h } from 'vue'
 import { render } from '../../test-utils/vue-testing-library'
 import { Listbox, ListboxLabel, ListboxButton, ListboxOptions, ListboxOption } from './listbox'
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
@@ -358,6 +358,101 @@ describe('Rendering', () => {
         assertListboxButtonLinkedWithListboxLabel()
       })
     )
+
+    describe('`type` attribute', () => {
+      it('should set the `type` to "button" by default', async () => {
+        renderTemplate({
+          template: html`
+            <Listbox v-model="value">
+              <ListboxButton>Trigger</ListboxButton>
+            </Listbox>
+          `,
+          setup: () => ({ value: ref(null) }),
+        })
+
+        expect(getListboxButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the `type` to "button" if it already contains a `type`', async () => {
+        renderTemplate({
+          template: html`
+            <Listbox v-model="value">
+              <ListboxButton type="submit">
+                Trigger
+              </ListboxButton>
+            </Listbox>
+          `,
+          setup: () => ({ value: ref(null) }),
+        })
+
+        expect(getListboxButton()).toHaveAttribute('type', 'submit')
+      })
+
+      it(
+        'should set the `type` to "button" when using the `as` prop which resolves to a "button"',
+        suppressConsoleLogs(async () => {
+          renderTemplate({
+            template: html`
+              <Listbox v-model="value">
+                <ListboxButton :as="CustomButton">
+                  Trigger
+                </ListboxButton>
+              </Listbox>
+            `,
+            setup: () => ({
+              value: ref(null),
+              CustomButton: defineComponent({
+                setup: props => () => h('button', { ...props }),
+              }),
+            }),
+          })
+
+          await new Promise(requestAnimationFrame)
+
+          expect(getListboxButton()).toHaveAttribute('type', 'button')
+        })
+      )
+
+      it('should not set the type if the "as" prop is not a "button"', async () => {
+        renderTemplate({
+          template: html`
+            <Listbox v-model="value">
+              <ListboxButton as="div">
+                Trigger
+              </ListboxButton>
+            </Listbox>
+          `,
+          setup: () => ({ value: ref(null) }),
+        })
+
+        expect(getListboxButton()).not.toHaveAttribute('type')
+      })
+
+      it(
+        'should not set the `type` to "button" when using the `as` prop which resolves to a "div"',
+        suppressConsoleLogs(async () => {
+          renderTemplate({
+            template: html`
+              <Listbox v-model="value">
+                <ListboxButton :as="CustomButton">
+                  Trigger
+                </ListboxButton>
+              </Listbox>
+            `,
+            setup: () => ({
+              value: ref(null),
+              CustomButton: defineComponent({
+                setup: props => () => h('div', props),
+              }),
+            }),
+          })
+
+          await new Promise(requestAnimationFrame)
+
+          expect(getListboxButton()).not.toHaveAttribute('type')
+        })
+      )
+    })
   })
 
   describe('ListboxOptions', () => {
diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.ts b/packages/@headlessui-vue/src/components/listbox/listbox.ts
index 49b5d28343..94184f6275 100644
--- a/packages/@headlessui-vue/src/components/listbox/listbox.ts
+++ b/packages/@headlessui-vue/src/components/listbox/listbox.ts
@@ -23,6 +23,7 @@ import { dom } from '../../utils/dom'
 import { useWindowEvent } from '../../hooks/use-window-event'
 import { useOpenClosed, State, useOpenClosedProvider } from '../../internal/open-closed'
 import { match } from '../../utils/match'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 
 enum ListboxStates {
   Open,
@@ -268,7 +269,7 @@ export let ListboxButton = defineComponent({
     let propsWeControl = {
       ref: 'el',
       id: this.id,
-      type: 'button',
+      type: this.type,
       'aria-haspopup': true,
       'aria-controls': dom(api.optionsRef)?.id,
       'aria-expanded': api.disabled.value
@@ -291,7 +292,7 @@ export let ListboxButton = defineComponent({
       name: 'ListboxButton',
     })
   },
-  setup() {
+  setup(props, { attrs }) {
     let api = useListboxContext('ListboxButton')
     let id = `headlessui-listbox-button-${useId()}`
 
@@ -344,7 +345,17 @@ export let ListboxButton = defineComponent({
       }
     }
 
-    return { id, el: api.buttonRef, handleKeyDown, handleKeyUp, handleClick }
+    return {
+      id,
+      el: api.buttonRef,
+      type: useResolveButtonType(
+        computed(() => ({ as: props.as, type: attrs.type })),
+        api.buttonRef
+      ),
+      handleKeyDown,
+      handleKeyUp,
+      handleClick,
+    }
   },
 })
 
diff --git a/packages/@headlessui-vue/src/components/menu/menu.test.tsx b/packages/@headlessui-vue/src/components/menu/menu.test.tsx
index 9bdc3c272b..30bbf07a90 100644
--- a/packages/@headlessui-vue/src/components/menu/menu.test.tsx
+++ b/packages/@headlessui-vue/src/components/menu/menu.test.tsx
@@ -353,6 +353,96 @@ describe('Rendering', () => {
         })
       })
     )
+
+    describe('`type` attribute', () => {
+      it('should set the `type` to "button" by default', async () => {
+        renderTemplate(
+          jsx`
+            <Menu>
+              <MenuButton>Trigger</MenuButton>
+            </Menu>
+          `
+        )
+
+        expect(getMenuButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the `type` to "button" if it already contains a `type`', async () => {
+        renderTemplate(
+          jsx`
+            <Menu>
+              <MenuButton type="submit">
+                Trigger
+              </MenuButton>
+            </Menu>
+          `
+        )
+
+        expect(getMenuButton()).toHaveAttribute('type', 'submit')
+      })
+
+      it(
+        'should set the `type` to "button" when using the `as` prop which resolves to a "button"',
+        suppressConsoleLogs(async () => {
+          renderTemplate({
+            template: jsx`
+              <Menu>
+                <MenuButton :as="CustomButton">
+                  Trigger
+                </MenuButton>
+              </Menu>
+            `,
+            setup: () => ({
+              CustomButton: defineComponent({
+                setup: props => () => h('button', { ...props }),
+              }),
+            }),
+          })
+
+          await new Promise(requestAnimationFrame)
+
+          expect(getMenuButton()).toHaveAttribute('type', 'button')
+        })
+      )
+
+      it('should not set the type if the "as" prop is not a "button"', async () => {
+        renderTemplate(
+          jsx`
+            <Menu>
+              <MenuButton as="div">
+                Trigger
+              </MenuButton>
+            </Menu>
+          `
+        )
+
+        expect(getMenuButton()).not.toHaveAttribute('type')
+      })
+
+      it(
+        'should not set the `type` to "button" when using the `as` prop which resolves to a "div"',
+        suppressConsoleLogs(async () => {
+          renderTemplate({
+            template: jsx`
+              <Menu>
+                <MenuButton :as="CustomButton">
+                  Trigger
+                </MenuButton>
+              </Menu>
+            `,
+            setup: () => ({
+              CustomButton: defineComponent({
+                setup: props => () => h('div', props),
+              }),
+            }),
+          })
+
+          await new Promise(requestAnimationFrame)
+
+          expect(getMenuButton()).not.toHaveAttribute('type')
+        })
+      )
+    })
   })
 
   describe('MenuItems', () => {
diff --git a/packages/@headlessui-vue/src/components/menu/menu.ts b/packages/@headlessui-vue/src/components/menu/menu.ts
index 837d67dbf6..3a252c68d5 100644
--- a/packages/@headlessui-vue/src/components/menu/menu.ts
+++ b/packages/@headlessui-vue/src/components/menu/menu.ts
@@ -20,6 +20,7 @@ import { useWindowEvent } from '../../hooks/use-window-event'
 import { useTreeWalker } from '../../hooks/use-tree-walker'
 import { useOpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
 import { match } from '../../utils/match'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 
 enum MenuStates {
   Open,
@@ -183,7 +184,7 @@ export let MenuButton = defineComponent({
     let propsWeControl = {
       ref: 'el',
       id: this.id,
-      type: 'button',
+      type: this.type,
       'aria-haspopup': true,
       'aria-controls': dom(api.itemsRef)?.id,
       'aria-expanded': this.$props.disabled ? undefined : api.menuState.value === MenuStates.Open,
@@ -200,7 +201,7 @@ export let MenuButton = defineComponent({
       name: 'MenuButton',
     })
   },
-  setup(props) {
+  setup(props, { attrs }) {
     let api = useMenuContext('MenuButton')
     let id = `headlessui-menu-button-${useId()}`
 
@@ -256,7 +257,17 @@ export let MenuButton = defineComponent({
       }
     }
 
-    return { id, el: api.buttonRef, handleKeyDown, handleKeyUp, handleClick }
+    return {
+      id,
+      el: api.buttonRef,
+      type: useResolveButtonType(
+        computed(() => ({ as: props.as, type: attrs.type })),
+        api.buttonRef
+      ),
+      handleKeyDown,
+      handleKeyUp,
+      handleClick,
+    }
   },
 })
 
diff --git a/packages/@headlessui-vue/src/components/popover/popover.test.ts b/packages/@headlessui-vue/src/components/popover/popover.test.ts
index 758b732cb1..bc872cc825 100644
--- a/packages/@headlessui-vue/src/components/popover/popover.test.ts
+++ b/packages/@headlessui-vue/src/components/popover/popover.test.ts
@@ -1,4 +1,4 @@
-import { defineComponent, nextTick, ref, watch } from 'vue'
+import { defineComponent, nextTick, ref, watch, h } from 'vue'
 import { render } from '../../test-utils/vue-testing-library'
 
 import { Popover, PopoverGroup, PopoverButton, PopoverPanel, PopoverOverlay } from './popover'
@@ -327,6 +327,96 @@ describe('Rendering', () => {
         assertPopoverPanel({ state: PopoverState.Visible })
       })
     )
+
+    describe('`type` attribute', () => {
+      it('should set the `type` to "button" by default', async () => {
+        renderTemplate(
+          html`
+            <Popover>
+              <PopoverButton>Trigger</PopoverButton>
+            </Popover>
+          `
+        )
+
+        expect(getPopoverButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the `type` to "button" if it already contains a `type`', async () => {
+        renderTemplate(
+          html`
+            <Popover>
+              <PopoverButton type="submit">
+                Trigger
+              </PopoverButton>
+            </Popover>
+          `
+        )
+
+        expect(getPopoverButton()).toHaveAttribute('type', 'submit')
+      })
+
+      it(
+        'should set the `type` to "button" when using the `as` prop which resolves to a "button"',
+        suppressConsoleLogs(async () => {
+          renderTemplate({
+            template: html`
+              <Popover>
+                <PopoverButton :as="CustomButton">
+                  Trigger
+                </PopoverButton>
+              </Popover>
+            `,
+            setup: () => ({
+              CustomButton: defineComponent({
+                setup: props => () => h('button', { ...props }),
+              }),
+            }),
+          })
+
+          await new Promise(requestAnimationFrame)
+
+          expect(getPopoverButton()).toHaveAttribute('type', 'button')
+        })
+      )
+
+      it('should not set the type if the "as" prop is not a "button"', async () => {
+        renderTemplate(
+          html`
+            <Popover>
+              <PopoverButton as="div">
+                Trigger
+              </PopoverButton>
+            </Popover>
+          `
+        )
+
+        expect(getPopoverButton()).not.toHaveAttribute('type')
+      })
+
+      it(
+        'should not set the `type` to "button" when using the `as` prop which resolves to a "div"',
+        suppressConsoleLogs(async () => {
+          renderTemplate({
+            template: html`
+              <Popover>
+                <PopoverButton :as="CustomButton">
+                  Trigger
+                </PopoverButton>
+              </Popover>
+            `,
+            setup: () => ({
+              CustomButton: defineComponent({
+                setup: props => () => h('div', props),
+              }),
+            }),
+          })
+
+          await new Promise(requestAnimationFrame)
+
+          expect(getPopoverButton()).not.toHaveAttribute('type')
+        })
+      )
+    })
   })
 
   describe('PopoverPanel', () => {
diff --git a/packages/@headlessui-vue/src/components/popover/popover.ts b/packages/@headlessui-vue/src/components/popover/popover.ts
index ef6fdd3912..5b8de111ae 100644
--- a/packages/@headlessui-vue/src/components/popover/popover.ts
+++ b/packages/@headlessui-vue/src/components/popover/popover.ts
@@ -27,6 +27,7 @@ import {
 import { dom } from '../../utils/dom'
 import { useWindowEvent } from '../../hooks/use-window-event'
 import { useOpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 
 enum PopoverStates {
   Open,
@@ -211,14 +212,15 @@ export let PopoverButton = defineComponent({
     let slot = { open: api.popoverState.value === PopoverStates.Open }
     let propsWeControl = this.isWithinPanel
       ? {
-          type: 'button',
+          ref: 'el',
+          type: this.type,
           onKeydown: this.handleKeyDown,
           onClick: this.handleClick,
         }
       : {
           ref: 'el',
           id: api.buttonId,
-          type: 'button',
+          type: this.type,
           'aria-expanded': this.$props.disabled
             ? undefined
             : api.popoverState.value === PopoverStates.Open,
@@ -237,7 +239,7 @@ export let PopoverButton = defineComponent({
       name: 'PopoverButton',
     })
   },
-  setup(props) {
+  setup(props, { attrs }) {
     let api = usePopoverContext('PopoverButton')
 
     let groupContext = usePopoverGroupContext()
@@ -261,9 +263,21 @@ export let PopoverButton = defineComponent({
       true
     )
 
+    let elementRef = ref(null)
+
+    if (!isWithinPanel) {
+      watchEffect(() => {
+        api.button.value = elementRef.value
+      })
+    }
+
     return {
       isWithinPanel,
-      el: isWithinPanel ? null : api.button,
+      el: elementRef,
+      type: useResolveButtonType(
+        computed(() => ({ as: props.as, type: attrs.type })),
+        elementRef
+      ),
       handleKeyDown(event: KeyboardEvent) {
         if (isWithinPanel) {
           if (api.popoverState.value === PopoverStates.Closed) return
@@ -373,7 +387,6 @@ export let PopoverButton = defineComponent({
           api.togglePopover()
         }
       },
-      handleFocus() {},
     }
   },
 })
diff --git a/packages/@headlessui-vue/src/components/switch/switch.test.tsx b/packages/@headlessui-vue/src/components/switch/switch.test.tsx
index 6c15b77343..7cc092f559 100644
--- a/packages/@headlessui-vue/src/components/switch/switch.test.tsx
+++ b/packages/@headlessui-vue/src/components/switch/switch.test.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch } from 'vue'
+import { defineComponent, ref, watch, h } from 'vue'
 import { render } from '../../test-utils/vue-testing-library'
 
 import { Switch, SwitchLabel, SwitchDescription, SwitchGroup } from './switch'
@@ -12,6 +12,7 @@ import {
 } from '../../test-utils/accessibility-assertions'
 import { press, click, Keys } from '../../test-utils/interactions'
 import { html } from '../../test-utils/html'
+import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 
 jest.mock('../../hooks/use-id')
 
@@ -101,6 +102,93 @@ describe('Rendering', () => {
 
     assertSwitch({ state: SwitchState.Off, label: 'Enable notifications' })
   })
+
+  describe('`type` attribute', () => {
+    it('should set the `type` to "button" by default', async () => {
+      renderTemplate({
+        template: html`
+          <Switch v-model="checked">
+            Trigger
+          </Switch>
+        `,
+        setup: () => ({ checked: ref(false) }),
+      })
+
+      expect(getSwitch()).toHaveAttribute('type', 'button')
+    })
+
+    it('should not set the `type` to "button" if it already contains a `type`', async () => {
+      renderTemplate({
+        template: html`
+          <Switch v-model="checked" type="submit">
+            Trigger
+          </Switch>
+        `,
+        setup: () => ({ checked: ref(false) }),
+      })
+
+      expect(getSwitch()).toHaveAttribute('type', 'submit')
+    })
+
+    it(
+      'should set the `type` to "button" when using the `as` prop which resolves to a "button"',
+      suppressConsoleLogs(async () => {
+        renderTemplate({
+          template: html`
+            <Switch v-model="checked" :as="CustomButton">
+              Trigger
+            </Switch>
+          `,
+          setup: () => ({
+            checked: ref(false),
+            CustomButton: defineComponent({
+              setup: props => () => h('button', { ...props }),
+            }),
+          }),
+        })
+
+        await new Promise(requestAnimationFrame)
+
+        expect(getSwitch()).toHaveAttribute('type', 'button')
+      })
+    )
+
+    it('should not set the type if the "as" prop is not a "button"', async () => {
+      renderTemplate({
+        template: html`
+          <Switch v-model="checked" as="div">
+            Trigger
+          </Switch>
+        `,
+        setup: () => ({ checked: ref(false) }),
+      })
+
+      expect(getSwitch()).not.toHaveAttribute('type')
+    })
+
+    it(
+      'should not set the `type` to "button" when using the `as` prop which resolves to a "div"',
+      suppressConsoleLogs(async () => {
+        renderTemplate({
+          template: html`
+            <Switch v-model="checked" :as="CustomButton">
+              Trigger
+            </Switch>
+          `,
+          setup: () => ({
+            checked: ref(false),
+            CustomButton: defineComponent({
+              setup: props => () => h('div', props),
+            }),
+          }),
+        })
+
+        await new Promise(requestAnimationFrame)
+
+        expect(getSwitch()).not.toHaveAttribute('type')
+      })
+    )
+  })
 })
 
 describe('Render composition', () => {
diff --git a/packages/@headlessui-vue/src/components/switch/switch.ts b/packages/@headlessui-vue/src/components/switch/switch.ts
index d0ef859afb..033ab7ff0c 100644
--- a/packages/@headlessui-vue/src/components/switch/switch.ts
+++ b/packages/@headlessui-vue/src/components/switch/switch.ts
@@ -7,6 +7,7 @@ import {
   // Types
   InjectionKey,
   Ref,
+  computed,
 } from 'vue'
 
 import { render } from '../../utils/render'
@@ -14,6 +15,7 @@ import { useId } from '../../hooks/use-id'
 import { Keys } from '../../keyboard'
 import { Label, useLabels } from '../label/label'
 import { Description, useDescriptions } from '../description/description'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 
 type StateDefinition = {
   // State
@@ -63,13 +65,12 @@ export let Switch = defineComponent({
     modelValue: { type: Boolean, default: false },
   },
   render() {
-    let api = inject(GroupContext, null)
-
     let slot = { checked: this.$props.modelValue }
     let propsWeControl = {
       id: this.id,
-      ref: api === null ? undefined : api.switchRef,
+      ref: 'el',
       role: 'switch',
+      type: this.type,
       tabIndex: 0,
       'aria-checked': this.$props.modelValue,
       'aria-labelledby': this.labelledby,
@@ -79,10 +80,6 @@ export let Switch = defineComponent({
       onKeypress: this.handleKeyPress,
     }
 
-    if (this.$props.as === 'button') {
-      Object.assign(propsWeControl, { type: 'button' })
-    }
-
     return render({
       props: { ...this.$props, ...propsWeControl },
       slot,
@@ -91,7 +88,7 @@ export let Switch = defineComponent({
       name: 'Switch',
     })
   },
-  setup(props, { emit }) {
+  setup(props, { emit, attrs }) {
     let api = inject(GroupContext, null)
     let id = `headlessui-switch-${useId()}`
 
@@ -99,9 +96,16 @@ export let Switch = defineComponent({
       emit('update:modelValue', !props.modelValue)
     }
 
+    let internalSwitchRef = ref(null)
+    let switchRef = api === null ? internalSwitchRef : api.switchRef
+
     return {
       id,
-      el: api?.switchRef,
+      el: switchRef,
+      type: useResolveButtonType(
+        computed(() => ({ as: props.as, type: attrs.type })),
+        switchRef
+      ),
       labelledby: api?.labelledby,
       describedby: api?.describedby,
       handleClick(event: MouseEvent) {
diff --git a/packages/@headlessui-vue/src/hooks/use-resolve-button-type.ts b/packages/@headlessui-vue/src/hooks/use-resolve-button-type.ts
new file mode 100644
index 0000000000..507fbd741d
--- /dev/null
+++ b/packages/@headlessui-vue/src/hooks/use-resolve-button-type.ts
@@ -0,0 +1,33 @@
+import { ref, onMounted, watchEffect, Ref } from 'vue'
+import { dom } from '../utils/dom'
+
+function resolveType(type: unknown, as: string | object) {
+  if (type) return type
+
+  let tag = as ?? 'button'
+  if (typeof tag === 'string' && tag.toLowerCase() === 'button') return 'button'
+
+  return undefined
+}
+
+export function useResolveButtonType(
+  data: Ref<{ as: string | object; type?: unknown }>,
+  refElement: Ref<HTMLElement | null>
+) {
+  let type = ref(resolveType(data.value.type, data.value.as))
+
+  onMounted(() => {
+    type.value = resolveType(data.value.type, data.value.as)
+  })
+
+  watchEffect(() => {
+    if (type.value) return
+    if (!dom(refElement)) return
+
+    if (dom(refElement) instanceof HTMLButtonElement && !dom(refElement)?.hasAttribute('type')) {
+      type.value = 'button'
+    }
+  })
+
+  return type
+}
diff --git a/packages/@headlessui-vue/src/test-utils/accessibility-assertions.ts b/packages/@headlessui-vue/src/test-utils/accessibility-assertions.ts
index 5a6fb38a87..6e434b3469 100644
--- a/packages/@headlessui-vue/src/test-utils/accessibility-assertions.ts
+++ b/packages/@headlessui-vue/src/test-utils/accessibility-assertions.ts
@@ -7,7 +7,7 @@ function assertNever(x: never): never {
 // ---
 
 export function getMenuButton(): HTMLElement | null {
-  return document.querySelector('button,[role="button"]')
+  return document.querySelector('button,[role="button"],[id^="headlessui-menu-button-"]')
 }
 
 export function getMenuButtons(): HTMLElement[] {
@@ -226,7 +226,7 @@ export function getListboxLabel(): HTMLElement | null {
 }
 
 export function getListboxButton(): HTMLElement | null {
-  return document.querySelector('button,[role="button"]')
+  return document.querySelector('button,[role="button"],[id^="headlessui-listbox-button-"]')
 }
 
 export function getListboxButtons(): HTMLElement[] {

From d60d2a558fc92c3d8e1241983deb3b55a1b965db Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 2 Aug 2021 14:37:45 +0200
Subject: [PATCH 2/4] Add Vue emit types (#712)

* Add Vue emit types

* ensure value is a boolean

Even though we only use `false` for now

* add Vue emit types for Tabs component

* update changelog

Co-authored-by: henribru <6639509+henribru@users.noreply.github.com>
---
 CHANGELOG.md                                       |  1 +
 .../src/components/dialog/dialog.ts                |  2 +-
 .../src/components/listbox/listbox.ts              |  2 +-
 .../src/components/radio-group/radio-group.ts      |  2 +-
 .../src/components/switch/switch.ts                |  2 +-
 .../@headlessui-vue/src/components/tabs/tabs.ts    |  4 +++-
 .../src/components/transitions/transition.ts       | 14 ++++++++++++--
 7 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a34b450b19..0263eca7f7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixes
 
 - Only add `type=button` to real buttons ([#709](https://github.com/tailwindlabs/headlessui/pull/709))
+- Add Vue emit types ([#679](https://github.com/tailwindlabs/headlessui/pull/679), [#712](https://github.com/tailwindlabs/headlessui/pull/712))
 
 ## [@headlessui/react@v1.4.0] - 2021-07-29
 
diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.ts b/packages/@headlessui-vue/src/components/dialog/dialog.ts
index 04103fac8b..346e7deaa3 100644
--- a/packages/@headlessui-vue/src/components/dialog/dialog.ts
+++ b/packages/@headlessui-vue/src/components/dialog/dialog.ts
@@ -74,7 +74,7 @@ export let Dialog = defineComponent({
     open: { type: [Boolean, String], default: Missing },
     initialFocus: { type: Object as PropType<HTMLElement | null>, default: null },
   },
-  emits: ['close'],
+  emits: { close: (_close: boolean) => true },
   render() {
     let propsWeControl = {
       // Manually passthrough the attributes, because Vue can't automatically pass
diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.ts b/packages/@headlessui-vue/src/components/listbox/listbox.ts
index 94184f6275..d431f1b664 100644
--- a/packages/@headlessui-vue/src/components/listbox/listbox.ts
+++ b/packages/@headlessui-vue/src/components/listbox/listbox.ts
@@ -79,7 +79,7 @@ function useListboxContext(component: string) {
 
 export let Listbox = defineComponent({
   name: 'Listbox',
-  emits: ['update:modelValue'],
+  emits: { 'update:modelValue': (_value: any) => true },
   props: {
     as: { type: [Object, String], default: 'template' },
     disabled: { type: [Boolean], default: false },
diff --git a/packages/@headlessui-vue/src/components/radio-group/radio-group.ts b/packages/@headlessui-vue/src/components/radio-group/radio-group.ts
index e332b8e940..dba087a802 100644
--- a/packages/@headlessui-vue/src/components/radio-group/radio-group.ts
+++ b/packages/@headlessui-vue/src/components/radio-group/radio-group.ts
@@ -60,7 +60,7 @@ function useRadioGroupContext(component: string) {
 
 export let RadioGroup = defineComponent({
   name: 'RadioGroup',
-  emits: ['update:modelValue'],
+  emits: { 'update:modelValue': (_value: any) => true },
   props: {
     as: { type: [Object, String], default: 'div' },
     disabled: { type: [Boolean], default: false },
diff --git a/packages/@headlessui-vue/src/components/switch/switch.ts b/packages/@headlessui-vue/src/components/switch/switch.ts
index 033ab7ff0c..ae202f8786 100644
--- a/packages/@headlessui-vue/src/components/switch/switch.ts
+++ b/packages/@headlessui-vue/src/components/switch/switch.ts
@@ -59,7 +59,7 @@ export let SwitchGroup = defineComponent({
 
 export let Switch = defineComponent({
   name: 'Switch',
-  emits: ['update:modelValue'],
+  emits: { 'update:modelValue': (_value: boolean) => true },
   props: {
     as: { type: [Object, String], default: 'button' },
     modelValue: { type: Boolean, default: false },
diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.ts b/packages/@headlessui-vue/src/components/tabs/tabs.ts
index b13361e9b7..7c50ac0145 100644
--- a/packages/@headlessui-vue/src/components/tabs/tabs.ts
+++ b/packages/@headlessui-vue/src/components/tabs/tabs.ts
@@ -52,7 +52,9 @@ function useTabsContext(component: string) {
 
 export let TabGroup = defineComponent({
   name: 'TabGroup',
-  emits: ['change'],
+  emits: {
+    change: (_index: number) => true,
+  },
   props: {
     as: { type: [Object, String], default: 'template' },
     defaultIndex: { type: [Number], default: 0 },
diff --git a/packages/@headlessui-vue/src/components/transitions/transition.ts b/packages/@headlessui-vue/src/components/transitions/transition.ts
index 02ba8b8cb5..baed2a359f 100644
--- a/packages/@headlessui-vue/src/components/transitions/transition.ts
+++ b/packages/@headlessui-vue/src/components/transitions/transition.ts
@@ -145,7 +145,12 @@ export let TransitionChild = defineComponent({
     leaveFrom: { type: [String], default: '' },
     leaveTo: { type: [String], default: '' },
   },
-  emits: ['beforeEnter', 'afterEnter', 'beforeLeave', 'afterLeave'],
+  emits: {
+    beforeEnter: () => true,
+    afterEnter: () => true,
+    beforeLeave: () => true,
+    afterLeave: () => true,
+  },
   render() {
     if (this.renderAsRoot) {
       return h(
@@ -357,7 +362,12 @@ export let TransitionRoot = defineComponent({
     leaveFrom: { type: [String], default: '' },
     leaveTo: { type: [String], default: '' },
   },
-  emits: ['beforeEnter', 'afterEnter', 'beforeLeave', 'afterLeave'],
+  emits: {
+    beforeEnter: () => true,
+    afterEnter: () => true,
+    beforeLeave: () => true,
+    afterLeave: () => true,
+  },
   render() {
     let { show, appear, unmount, ...passThroughProps } = this.$props
     let sharedProps = { unmount }

From b59c091030ee61bac455696234185c0999969adf Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Tue, 24 Aug 2021 11:26:19 +0200
Subject: [PATCH 3/4] Fix broken `escape` key behaviour (#754)

* fix broken `escape` key behaviour

We've "fixed" an issue when we had nested Dialogs ([#430](https://github.com/tailwindlabs/headlessui/pull/430)).
The `escape` would not close the correct Dialog. The issue here was with
the logic to know whether we were the last Dialog or not. The issue was
_not_ how we implemented the `close` functionality.

To make things easier, we moved the global window event to a scoped div
(the Dialog itself). While that fixed the nested Dialog issue, it
introduced this bug where `escape` would not close if you click on a
non-focusable element like a span in the Dialog.

Since that PR we did a bunch of improvements on how the underlying
"stacking" system worked.
This PR reverts to the "global" window event listener so that we can
still catch all of the `escape` keydown events.

Fixes: #524
Fixes: #693

* update changelog
---
 CHANGELOG.md                                  |   2 +
 .../src/components/dialog/dialog.test.tsx     |  84 ++++++++++++++
 .../src/components/dialog/dialog.tsx          |  23 ++--
 .../src/components/dialog/dialog.test.ts      | 105 ++++++++++++++++++
 .../src/components/dialog/dialog.ts           |  21 ++--
 5 files changed, 212 insertions(+), 23 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0263eca7f7..296b954b1c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixes
 
 - Only add `type=button` to real buttons ([#709](https://github.com/tailwindlabs/headlessui/pull/709))
+- Fix `escape` bug not closing Dialog after clicking in Dialog ([#754](https://github.com/tailwindlabs/headlessui/pull/754))
 
 ## [Unreleased - Vue]
 
@@ -17,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Only add `type=button` to real buttons ([#709](https://github.com/tailwindlabs/headlessui/pull/709))
 - Add Vue emit types ([#679](https://github.com/tailwindlabs/headlessui/pull/679), [#712](https://github.com/tailwindlabs/headlessui/pull/712))
+- Fix `escape` bug not closing Dialog after clicking in Dialog ([#754](https://github.com/tailwindlabs/headlessui/pull/754))
 
 ## [@headlessui/react@v1.4.0] - 2021-07-29
 
diff --git a/packages/@headlessui-react/src/components/dialog/dialog.test.tsx b/packages/@headlessui-react/src/components/dialog/dialog.test.tsx
index 6fa61270ef..fcdc88f0f2 100644
--- a/packages/@headlessui-react/src/components/dialog/dialog.test.tsx
+++ b/packages/@headlessui-react/src/components/dialog/dialog.test.tsx
@@ -430,6 +430,90 @@ describe('Keyboard interactions', () => {
         assertDialog({ state: DialogState.InvisibleUnmounted })
       })
     )
+
+    it(
+      'should be possible to close the dialog with Escape, when a field is focused',
+      suppressConsoleLogs(async () => {
+        function Example() {
+          let [isOpen, setIsOpen] = useState(false)
+          return (
+            <>
+              <button id="trigger" onClick={() => setIsOpen(v => !v)}>
+                Trigger
+              </button>
+              <Dialog open={isOpen} onClose={setIsOpen}>
+                Contents
+                <input id="name" />
+                <TabSentinel />
+              </Dialog>
+            </>
+          )
+        }
+        render(<Example />)
+
+        assertDialog({ state: DialogState.InvisibleUnmounted })
+
+        // Open dialog
+        await click(document.getElementById('trigger'))
+
+        // Verify it is open
+        assertDialog({
+          state: DialogState.Visible,
+          attributes: { id: 'headlessui-dialog-1' },
+        })
+
+        // Close dialog
+        await press(Keys.Escape)
+
+        // Verify it is close
+        assertDialog({ state: DialogState.InvisibleUnmounted })
+      })
+    )
+
+    it(
+      'should not be possible to close the dialog with Escape, when a field is focused but cancels the event',
+      suppressConsoleLogs(async () => {
+        function Example() {
+          let [isOpen, setIsOpen] = useState(false)
+          return (
+            <>
+              <button id="trigger" onClick={() => setIsOpen(v => !v)}>
+                Trigger
+              </button>
+              <Dialog open={isOpen} onClose={setIsOpen}>
+                Contents
+                <input
+                  id="name"
+                  onKeyDown={event => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                  }}
+                />
+                <TabSentinel />
+              </Dialog>
+            </>
+          )
+        }
+        render(<Example />)
+
+        assertDialog({ state: DialogState.InvisibleUnmounted })
+
+        // Open dialog
+        await click(document.getElementById('trigger'))
+
+        // Verify it is open
+        assertDialog({
+          state: DialogState.Visible,
+          attributes: { id: 'headlessui-dialog-1' },
+        })
+
+        // Try to close the dialog
+        await press(Keys.Escape)
+
+        // Verify it is still open
+        assertDialog({ state: DialogState.Visible })
+      })
+    )
   })
 })
 
diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx
index 2055bd4ac6..839ca69087 100644
--- a/packages/@headlessui-react/src/components/dialog/dialog.tsx
+++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx
@@ -7,15 +7,14 @@ import React, {
   useMemo,
   useReducer,
   useRef,
+  useState,
 
   // Types
   ContextType,
   ElementType,
   MouseEvent as ReactMouseEvent,
-  KeyboardEvent as ReactKeyboardEvent,
   MutableRefObject,
   Ref,
-  useState,
 } from 'react'
 
 import { Props } from '../../types'
@@ -217,6 +216,16 @@ let DialogRoot = forwardRefWithAs(function Dialog<
     close()
   })
 
+  // Handle `Escape` to close
+  useWindowEvent('keydown', event => {
+    if (event.key !== Keys.Escape) return
+    if (dialogState !== DialogStates.Open) return
+    if (hasNestedDialogs) return
+    event.preventDefault()
+    event.stopPropagation()
+    close()
+  })
+
   // Scroll lock
   useEffect(() => {
     if (dialogState !== DialogStates.Open) return
@@ -282,16 +291,6 @@ let DialogRoot = forwardRefWithAs(function Dialog<
     onClick(event: ReactMouseEvent) {
       event.stopPropagation()
     },
-
-    // Handle `Escape` to close
-    onKeyDown(event: ReactKeyboardEvent) {
-      if (event.key !== Keys.Escape) return
-      if (dialogState !== DialogStates.Open) return
-      if (hasNestedDialogs) return
-      event.preventDefault()
-      event.stopPropagation()
-      close()
-    },
   }
   let passthroughProps = rest
 
diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.test.ts b/packages/@headlessui-vue/src/components/dialog/dialog.test.ts
index e01d98ee9c..e706b1d5fa 100644
--- a/packages/@headlessui-vue/src/components/dialog/dialog.test.ts
+++ b/packages/@headlessui-vue/src/components/dialog/dialog.test.ts
@@ -526,6 +526,111 @@ describe('Keyboard interactions', () => {
         assertDialog({ state: DialogState.InvisibleUnmounted })
       })
     )
+
+    it(
+      'should be possible to close the dialog with Escape, when a field is focused',
+      suppressConsoleLogs(async () => {
+        renderTemplate({
+          template: `
+            <div>
+              <button id="trigger" @click="toggleOpen">
+                Trigger
+              </button>
+              <Dialog :open="isOpen" @close="setIsOpen">
+                Contents
+                <input id="name" />
+                <TabSentinel />
+              </Dialog>
+            </div>
+          `,
+          setup() {
+            let isOpen = ref(false)
+            return {
+              isOpen,
+              setIsOpen(value: boolean) {
+                isOpen.value = value
+              },
+              toggleOpen() {
+                isOpen.value = !isOpen.value
+              },
+            }
+          },
+        })
+
+        assertDialog({ state: DialogState.InvisibleUnmounted })
+
+        // Open dialog
+        await click(document.getElementById('trigger'))
+
+        // Verify it is open
+        assertDialog({
+          state: DialogState.Visible,
+          attributes: { id: 'headlessui-dialog-1' },
+        })
+
+        // Close dialog
+        await press(Keys.Escape)
+
+        // Verify it is close
+        assertDialog({ state: DialogState.InvisibleUnmounted })
+      })
+    )
+
+    it(
+      'should not be possible to close the dialog with Escape, when a field is focused but cancels the event',
+      suppressConsoleLogs(async () => {
+        renderTemplate({
+          template: `
+            <div>
+              <button id="trigger" @click="toggleOpen">
+                Trigger
+              </button>
+              <Dialog :open="isOpen" @close="setIsOpen">
+                Contents
+                <input
+                  id="name"
+                  @keydown="cancel"
+                />
+                <TabSentinel />
+              </Dialog>
+            </div>
+          `,
+          setup() {
+            let isOpen = ref(false)
+            return {
+              isOpen,
+              setIsOpen(value: boolean) {
+                isOpen.value = value
+              },
+              toggleOpen() {
+                isOpen.value = !isOpen.value
+              },
+              cancel(event: KeyboardEvent) {
+                event.preventDefault()
+                event.stopPropagation()
+              },
+            }
+          },
+        })
+
+        assertDialog({ state: DialogState.InvisibleUnmounted })
+
+        // Open dialog
+        await click(document.getElementById('trigger'))
+
+        // Verify it is open
+        assertDialog({
+          state: DialogState.Visible,
+          attributes: { id: 'headlessui-dialog-1' },
+        })
+
+        // Try to close the dialog
+        await press(Keys.Escape)
+
+        // Verify it is still open
+        assertDialog({ state: DialogState.Visible })
+      })
+    )
   })
 })
 
diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.ts b/packages/@headlessui-vue/src/components/dialog/dialog.ts
index 346e7deaa3..d2a7f84ad3 100644
--- a/packages/@headlessui-vue/src/components/dialog/dialog.ts
+++ b/packages/@headlessui-vue/src/components/dialog/dialog.ts
@@ -87,7 +87,6 @@ export let Dialog = defineComponent({
       'aria-labelledby': this.titleId,
       'aria-describedby': this.describedby,
       onClick: this.handleClick,
-      onKeydown: this.handleKeyDown,
     }
     let { open: _, initialFocus, ...passThroughProps } = this.$props
 
@@ -205,6 +204,16 @@ export let Dialog = defineComponent({
       nextTick(() => target?.focus())
     })
 
+    // Handle `Escape` to close
+    useWindowEvent('keydown', event => {
+      if (event.key !== Keys.Escape) return
+      if (dialogState.value !== DialogStates.Open) return
+      if (containers.value.size > 1) return // 1 is myself, otherwise other elements in the Stack
+      event.preventDefault()
+      event.stopPropagation()
+      api.close()
+    })
+
     // Scroll lock
     watchEffect(onInvalidate => {
       if (dialogState.value !== DialogStates.Open) return
@@ -260,16 +269,6 @@ export let Dialog = defineComponent({
       handleClick(event: MouseEvent) {
         event.stopPropagation()
       },
-
-      // Handle `Escape` to close
-      handleKeyDown(event: KeyboardEvent) {
-        if (event.key !== Keys.Escape) return
-        if (dialogState.value !== DialogStates.Open) return
-        if (containers.value.size > 1) return // 1 is myself, otherwise other elements in the Stack
-        event.preventDefault()
-        event.stopPropagation()
-        api.close()
-      },
     }
   },
 })

From 3f14839c3343f627779bc6285cb2e074e64d6462 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 30 Aug 2021 13:48:49 +0200
Subject: [PATCH 4/4] Warn instead of error when there are no focusable
 elements (#775)

* warn instead of error when there are no focusable elements

* update changelog

Co-authored-by: Krystof Rehacek <krystofee@gmail.com>
---
 CHANGELOG.md                                  |  2 ++
 .../components/focus-trap/focus-trap.test.tsx | 25 +++++++-------
 .../src/hooks/use-focus-trap.ts               |  2 +-
 .../components/focus-trap/focus-trap.test.ts  | 34 ++++++++-----------
 .../src/hooks/use-focus-trap.ts               |  2 +-
 5 files changed, 30 insertions(+), 35 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 296b954b1c..b804164bd0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Only add `type=button` to real buttons ([#709](https://github.com/tailwindlabs/headlessui/pull/709))
 - Fix `escape` bug not closing Dialog after clicking in Dialog ([#754](https://github.com/tailwindlabs/headlessui/pull/754))
+- Use `console.warn` instead of throwing an error when there are no focusable elements ([#775](https://github.com/tailwindlabs/headlessui/pull/775))
 
 ## [Unreleased - Vue]
 
@@ -19,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Only add `type=button` to real buttons ([#709](https://github.com/tailwindlabs/headlessui/pull/709))
 - Add Vue emit types ([#679](https://github.com/tailwindlabs/headlessui/pull/679), [#712](https://github.com/tailwindlabs/headlessui/pull/712))
 - Fix `escape` bug not closing Dialog after clicking in Dialog ([#754](https://github.com/tailwindlabs/headlessui/pull/754))
+- Use `console.warn` instead of throwing an error when there are no focusable elements ([#775](https://github.com/tailwindlabs/headlessui/pull/775))
 
 ## [@headlessui/react@v1.4.0] - 2021-07-29
 
diff --git a/packages/@headlessui-react/src/components/focus-trap/focus-trap.test.tsx b/packages/@headlessui-react/src/components/focus-trap/focus-trap.test.tsx
index f0de0f330b..58c2c523b0 100644
--- a/packages/@headlessui-react/src/components/focus-trap/focus-trap.test.tsx
+++ b/packages/@headlessui-react/src/components/focus-trap/focus-trap.test.tsx
@@ -62,20 +62,19 @@ it('should focus the initialFocus element inside the FocusTrap even if another e
   assertActiveElement(document.getElementById('c'))
 })
 
-it(
-  'should error when there is no focusable element inside the FocusTrap',
-  suppressConsoleLogs(() => {
-    expect(() => {
-      render(
-        <FocusTrap>
-          <span>Nothing to see here...</span>
-        </FocusTrap>
-      )
-    }).toThrowErrorMatchingInlineSnapshot(
-      `"There are no focusable elements inside the <FocusTrap />"`
+it('should warn when there is no focusable element inside the FocusTrap', () => {
+  let spy = jest.spyOn(console, 'warn').mockImplementation(jest.fn())
+
+  function Example() {
+    return (
+      <FocusTrap>
+        <span>Nothing to see here...</span>
+      </FocusTrap>
     )
-  })
-)
+  }
+  render(<Example />)
+  expect(spy.mock.calls[0][0]).toBe('There are no focusable elements inside the <FocusTrap />')
+})
 
 it(
   'should not be possible to programmatically escape the focus trap',
diff --git a/packages/@headlessui-react/src/hooks/use-focus-trap.ts b/packages/@headlessui-react/src/hooks/use-focus-trap.ts
index 2b7eb905cc..68b4c282ac 100644
--- a/packages/@headlessui-react/src/hooks/use-focus-trap.ts
+++ b/packages/@headlessui-react/src/hooks/use-focus-trap.ts
@@ -89,7 +89,7 @@ export function useFocusTrap(
       focusElement(initialFocus.current)
     } else {
       if (focusIn(container.current, Focus.First) === FocusResult.Error) {
-        throw new Error('There are no focusable elements inside the <FocusTrap />')
+        console.warn('There are no focusable elements inside the <FocusTrap />')
       }
     }
 
diff --git a/packages/@headlessui-vue/src/components/focus-trap/focus-trap.test.ts b/packages/@headlessui-vue/src/components/focus-trap/focus-trap.test.ts
index ee70eedf46..8243a82ff4 100644
--- a/packages/@headlessui-vue/src/components/focus-trap/focus-trap.test.ts
+++ b/packages/@headlessui-vue/src/components/focus-trap/focus-trap.test.ts
@@ -109,28 +109,22 @@ it('should focus the initialFocus element inside the FocusTrap even if another e
   assertActiveElement(document.getElementById('c'))
 })
 
-it(
-  'should error when there is no focusable element inside the FocusTrap',
-  suppressConsoleLogs(async () => {
-    expect.assertions(1)
+it('should warn when there is no focusable element inside the FocusTrap', async () => {
+  expect.assertions(1)
+  let spy = jest.spyOn(console, 'warn').mockImplementation(jest.fn())
 
-    renderTemplate({
-      template: html`
-        <FocusTrap>
-          <span>Nothing to see here...</span>
-        </FocusTrap>
-      `,
-      errorCaptured(err: unknown) {
-        expect((err as Error).message).toMatchInlineSnapshot(
-          `"There are no focusable elements inside the <FocusTrap />"`
-        )
-        return false
-      },
-    })
+  renderTemplate(
+    html`
+      <FocusTrap>
+        <span>Nothing to see here...</span>
+      </FocusTrap>
+    `
+  )
 
-    await new Promise(nextTick)
-  })
-)
+  await new Promise(nextTick)
+
+  expect(spy.mock.calls[0][0]).toBe('There are no focusable elements inside the <FocusTrap />')
+})
 
 it(
   'should not be possible to programmatically escape the focus trap',
diff --git a/packages/@headlessui-vue/src/hooks/use-focus-trap.ts b/packages/@headlessui-vue/src/hooks/use-focus-trap.ts
index 3236a14b69..e5a070e721 100644
--- a/packages/@headlessui-vue/src/hooks/use-focus-trap.ts
+++ b/packages/@headlessui-vue/src/hooks/use-focus-trap.ts
@@ -53,7 +53,7 @@ export function useFocusTrap(
         }
       }
 
-      if (!couldFocus) throw new Error('There are no focusable elements inside the <FocusTrap />')
+      if (!couldFocus) console.warn('There are no focusable elements inside the <FocusTrap />')
     }
 
     previousActiveElement.value = document.activeElement as HTMLElement