From 7477ad2bd4e9f44897264a61db4e779defb39bad Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 25 Aug 2022 14:01:31 -0400 Subject: [PATCH 1/5] wip --- .../pages/dialog/dialog-focus-issue.tsx | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 packages/playground-react/pages/dialog/dialog-focus-issue.tsx diff --git a/packages/playground-react/pages/dialog/dialog-focus-issue.tsx b/packages/playground-react/pages/dialog/dialog-focus-issue.tsx new file mode 100644 index 000000000..ad139c920 --- /dev/null +++ b/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 ( + +
+
+
+ + + + +
+
+
+ ) +} + +export default function DialogFocusIssue() { + let [isOpen, setIsOpen] = useState(false) + + return ( +
+

Headless UI Focus Jump

+ +
+
+
+
+
+
+
+
+
+
+
+ setIsOpen(false)} /> +
+ ) +} From d93c6b2731fe2032ac27974ebf74ff28df40d3e7 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 25 Aug 2022 15:57:48 -0400 Subject: [PATCH 2/5] wip --- packages/@headlessui-react/src/internal/hidden.tsx | 2 ++ packages/@headlessui-vue/src/internal/hidden.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/@headlessui-react/src/internal/hidden.tsx b/packages/@headlessui-react/src/internal/hidden.tsx index 4e9ffac05..09132da0b 100644 --- a/packages/@headlessui-react/src/internal/hidden.tsx +++ b/packages/@headlessui-react/src/internal/hidden.tsx @@ -24,6 +24,8 @@ export let Hidden = forwardRefWithAs(function VisuallyHidden< 'aria-hidden': (features & Features.Focusable) === Features.Focusable ? true : undefined, style: { position: 'absolute', + top: 0, + left: 0, width: 1, height: 1, padding: 0, diff --git a/packages/@headlessui-vue/src/internal/hidden.ts b/packages/@headlessui-vue/src/internal/hidden.ts index a4e655e3e..de3c6f39d 100644 --- a/packages/@headlessui-vue/src/internal/hidden.ts +++ b/packages/@headlessui-vue/src/internal/hidden.ts @@ -25,6 +25,8 @@ export let Hidden = defineComponent({ 'aria-hidden': (features & Features.Focusable) === Features.Focusable ? true : undefined, style: { position: 'absolute', + top: 0, + left: 0, width: 1, height: 1, padding: 0, From 27a96c8dbcc0bbb958f5dab34f706dc71ef45da9 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 26 Aug 2022 09:13:28 -0400 Subject: [PATCH 3/5] fix it --- packages/@headlessui-react/src/internal/hidden.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/@headlessui-react/src/internal/hidden.tsx b/packages/@headlessui-react/src/internal/hidden.tsx index 09132da0b..398775c02 100644 --- a/packages/@headlessui-react/src/internal/hidden.tsx +++ b/packages/@headlessui-react/src/internal/hidden.tsx @@ -23,11 +23,11 @@ export let Hidden = forwardRefWithAs(function VisuallyHidden< ref, 'aria-hidden': (features & Features.Focusable) === Features.Focusable ? true : undefined, style: { - position: 'absolute', - top: 0, - left: 0, + position: 'fixed', + top: 1, + left: 1, width: 1, - height: 1, + height: 0, padding: 0, margin: -1, overflow: 'hidden', From f30c7b4acaa9bd7f1cbe8c1067a2ab242fb243d7 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 26 Aug 2022 09:14:04 -0400 Subject: [PATCH 4/5] fixit --- packages/@headlessui-vue/src/internal/hidden.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/@headlessui-vue/src/internal/hidden.ts b/packages/@headlessui-vue/src/internal/hidden.ts index de3c6f39d..a6599d4f8 100644 --- a/packages/@headlessui-vue/src/internal/hidden.ts +++ b/packages/@headlessui-vue/src/internal/hidden.ts @@ -24,11 +24,11 @@ export let Hidden = defineComponent({ let ourProps = { 'aria-hidden': (features & Features.Focusable) === Features.Focusable ? true : undefined, style: { - position: 'absolute', - top: 0, - left: 0, + position: 'fixed', + top: 1, + left: 1, width: 1, - height: 1, + height: 0, padding: 0, margin: -1, overflow: 'hidden', From 3ad7b2c30a17923bdfc0bbe875cc9c5ed699ce1b Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 26 Aug 2022 09:15:08 -0400 Subject: [PATCH 5/5] update changelog --- packages/@headlessui-react/CHANGELOG.md | 1 + packages/@headlessui-vue/CHANGELOG.md | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index bbfb72032..4458507a6 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/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 `` 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 diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md index 4aec5c160..937116a7f 100644 --- a/packages/@headlessui-vue/CHANGELOG.md +++ b/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 `` 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