Stop scrolling when hitting end of focus trap (#1789)

* wip

* wip

* fix it

* fixit

* update changelog

packages/@headlessui-react/CHANGELOG.md

@@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Only select the active option when using "singular" mode when pressing `<tab>` in the `Combobox` component ([#1750](https://github.com/tailwindlabs/headlessui/pull/1750))
 - Improve the types of the `Combobox` component ([#1761](https://github.com/tailwindlabs/headlessui/pull/1761))
 - Only restore focus to the `Menu.Button` if necessary when activating a `Menu.Option` ([#1782](https://github.com/tailwindlabs/headlessui/pull/1782))
+- Don't scroll when wrapping around in focus trap ([#1789](https://github.com/tailwindlabs/headlessui/pull/1789))
 
 ## Changed
 

packages/@headlessui-react/src/internal/hidden.tsx

@@ -23,9 +23,11 @@ export let Hidden = forwardRefWithAs(function VisuallyHidden<
     ref,
     'aria-hidden': (features & Features.Focusable) === Features.Focusable ? true : undefined,
     style: {
-      position: 'absolute',
+      position: 'fixed',
+      top: 1,
+      left: 1,
       width: 1,
-      height: 1,
+      height: 0,
       padding: 0,
       margin: -1,
       overflow: 'hidden',

packages/@headlessui-vue/CHANGELOG.md

@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve `Combobox` re-opening keyboard issue on mobile ([#1732](https://github.com/tailwindlabs/headlessui/pull/1732))
 - Only select the active option when using "singular" mode when pressing `<tab>` in the `Combobox` component ([#1750](https://github.com/tailwindlabs/headlessui/pull/1750))
 - Only restore focus to the `MenuButton` if necessary when activating a `MenuOption` ([#1782](https://github.com/tailwindlabs/headlessui/pull/1782))
+- Don't scroll when wrapping around in focus trap ([#1789](https://github.com/tailwindlabs/headlessui/pull/1789))
 
 ## [1.6.7] - 2022-07-12
 

packages/@headlessui-vue/src/internal/hidden.ts

@@ -24,9 +24,11 @@ export let Hidden = defineComponent({
       let ourProps = {
         'aria-hidden': (features & Features.Focusable) === Features.Focusable ? true : undefined,
         style: {
-          position: 'absolute',
+          position: 'fixed',
+          top: 1,
+          left: 1,
           width: 1,
-          height: 1,
+          height: 0,
           padding: 0,
           margin: -1,
           overflow: 'hidden',

packages/playground-react/pages/dialog/dialog-focus-issue.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import { Dialog } from '@headlessui/react'
+
+function Modal(props) {
+  return (
+    <Dialog className="relative z-50" {...props}>
+      <div className="fixed inset-0 bg-green-500 bg-opacity-90 backdrop-blur backdrop-filter" />
+      <div className="fixed inset-0 overflow-y-auto">
+        <div className="flex min-h-full items-center justify-center p-4">
+          <Dialog.Panel className="relative m-5 w-full max-w-3xl rounded-lg bg-white p-10 shadow">
+            <button className="m-5 rounded-lg bg-blue-600 py-2 px-5 text-white">One</button>
+            <button className="m-5 rounded-lg bg-blue-600 py-2 px-5 text-white">Two</button>
+          </Dialog.Panel>
+        </div>
+      </div>
+    </Dialog>
+  )
+}
+
+export default function DialogFocusIssue() {
+  let [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <div className="p-10">
+      <h1 className="py-2 text-3xl font-semibold">Headless UI Focus Jump</h1>
+      <button
+        className="my-5 rounded-lg bg-blue-600 py-2 px-5 text-white"
+        onClick={() => setIsOpen(true)}
+      >
+        Open Dialog
+      </button>
+      <div className="bg-white p-20"></div>
+      <div className="bg-gray-100 p-20"></div>
+      <div className="bg-gray-200 p-20"></div>
+      <div className="bg-gray-300 p-20"></div>
+      <div className="bg-gray-400 p-20"></div>
+      <div className="bg-gray-500 p-20"></div>
+      <div className="bg-gray-600 p-20"></div>
+      <div className="bg-gray-700 p-20"></div>
+      <div className="bg-gray-800 p-20"></div>
+      <div className="bg-gray-900 p-20"></div>
+      <div className="bg-black p-20"></div>
+      <Modal open={isOpen} onClose={() => setIsOpen(false)} />
+    </div>
+  )
+}