Don't scroll lock when transition isn't showing (#2422)

* Add tests * Make transition initial state based on computed `show` prop * Update changelog
tailwindlabs · Apr 10, 2023 · 7ec0652 · 7ec0652
1 parent 2063132
commit 7ec0652
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 2 deletions.
diff --git a/packages/@headlessui-react/src/components/dialog/dialog.test.tsx b/packages/@headlessui-react/src/components/dialog/dialog.test.tsx
@@ -440,6 +440,28 @@ describe('Rendering', () => {
         expect(document.documentElement.style.overflow).toBe('')
       })
     )
+
+    it(
+      'should not have a scroll lock when the transition marked as not shown',
+      suppressConsoleLogs(async () => {
+        function Example() {
+          return (
+            <Transition as={Fragment} show={false} unmount={false}>
+              <Dialog as="div" onClose={() => {}}>
+                <input type="text" />
+              </Dialog>
+            </Transition>
+          )
+        }
+
+        render(<Example />)
+
+        await nextFrame()
+
+        // The overflow should NOT be there
+        expect(document.documentElement.style.overflow).toBe('')
+      })
+    )
   })
 
   describe('Dialog.Overlay', () => {

diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix focus styles showing up when using the mouse ([#2347](https://github.com/tailwindlabs/headlessui/pull/2347))
 - Disable `ComboboxInput` when its `Combobox` is disabled ([#2375](https://github.com/tailwindlabs/headlessui/pull/2375))
 - Add `FocusTrap` event listeners once document has loaded ([#2389](https://github.com/tailwindlabs/headlessui/pull/2389))
+- Don't scroll-lock `<Dialog>` when wrapping transition isn't showing ([#2422](https://github.com/tailwindlabs/headlessui/pull/2422))
 
 ### Added
 

diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.test.ts b/packages/@headlessui-vue/src/components/dialog/dialog.test.ts
@@ -615,6 +615,30 @@ describe('Rendering', () => {
         expect(document.documentElement.style.overflow).toBe('')
       })
     )
+
+    it(
+      'should not have a scroll lock when the transition marked as not shown',
+      suppressConsoleLogs(async () => {
+        renderTemplate({
+          components: {
+            Dialog,
+            TransitionRoot,
+          },
+          template: `
+            <TransitionRoot as="template" :show="false" :unmount="false">
+              <Dialog as="div">
+                <input type="text" />
+              </Dialog>
+            </TransitionRoot>
+          `,
+        })
+
+        await nextFrame()
+
+        // The overflow should NOT be there
+        expect(document.documentElement.style.overflow).toBe('')
+      })
+    )
   })
 
   describe('DialogOverlay', () => {

diff --git a/packages/@headlessui-vue/src/components/transitions/transition.ts b/packages/@headlessui-vue/src/components/transitions/transition.ts
@@ -193,14 +193,14 @@ export let TransitionChild = defineComponent({
     }
 
     let container = ref<HTMLElement | null>(null)
-    let state = ref(TreeStates.Visible)
     let strategy = computed(() => (props.unmount ? RenderStrategy.Unmount : RenderStrategy.Hidden))
 
     expose({ el: container, $el: container })
 
     let { show, appear } = useTransitionContext()
     let { register, unregister } = useParentNesting()
 
+    let state = ref(show.value ? TreeStates.Visible : TreeStates.Hidden)
     let initial = { value: true }
 
     let id = useId()
@@ -228,7 +228,7 @@ export let TransitionChild = defineComponent({
       if (!id) return
 
       // Make sure that we are visible
-      if (show && state.value !== TreeStates.Visible) {
+      if (show.value && state.value !== TreeStates.Visible) {
         state.value = TreeStates.Visible
         return
       }