Enable NoScroll feature for the initial useFocusTrap hook (#356)

* enable NoScroll feature for the initial useFocusTrap hook Once you are using Tab and Shift+Tab it does the scrolling. Fixes: #345 * update changelog
tailwindlabs · Apr 20, 2021 · 5ad0f07 · 5ad0f07
1 parent 520af65
commit 5ad0f07
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased - React]
 
-- Nothing yet!
+### Fixes
+
+- Fixed transitions being cancelled because of focus auto scroll ([#356](https://github.com/tailwindlabs/headlessui/pull/356))
 
 ## [Unreleased - Vue]
 

diff --git a/packages/@headlessui-react/src/hooks/use-focus-trap.ts b/packages/@headlessui-react/src/hooks/use-focus-trap.ts
@@ -46,7 +46,7 @@ export function useFocusTrap(
     } else {
       let couldFocus = false
       for (let container of containers.current) {
-        let result = focusIn(container, Focus.First)
+        let result = focusIn(container, Focus.First | Focus.NoScroll)
         if (result === FocusResult.Success) {
           couldFocus = true
           break

diff --git a/packages/@headlessui-vue/src/hooks/use-focus-trap.ts b/packages/@headlessui-vue/src/hooks/use-focus-trap.ts
@@ -46,7 +46,7 @@ export function useFocusTrap(
     } else {
       let couldFocus = false
       for (let container of containers.value) {
-        let result = focusIn(container, Focus.First)
+        let result = focusIn(container, Focus.First | Focus.NoScroll)
         if (result === FocusResult.Success) {
           couldFocus = true
           break