ignore "outside click" on removed elements

Co-authored-by: Colin King <me@colinking.co>
tailwindlabs · Mar 4, 2022 · e8fe06c · e8fe06c
1 parent 694fbd5
commit e8fe06c
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 0 deletions.
diff --git a/packages/@headlessui-react/src/components/dialog/dialog.test.tsx b/packages/@headlessui-react/src/components/dialog/dialog.test.tsx
@@ -806,6 +806,51 @@ describe('Mouse interactions', () => {
       expect(wrapperFn).toHaveBeenCalledTimes(0)
     })
   )
+
+  it(
+    'should should be possible to click on removed elements without closing the Dialog',
+    suppressConsoleLogs(async () => {
+      let wrapperFn = jest.fn()
+      function Example() {
+        let [isOpen, setIsOpen] = useState(true)
+        const ref = useRef<HTMLDivElement>(null)
+        return (
+          <div onClick={wrapperFn}>
+            <Dialog open={isOpen} onClose={setIsOpen}>
+              <div ref={ref}>
+                Contents
+                <button
+                  onMouseDown={() => {
+                    // Remove this button before the Dialog's mousedown listener fires:
+                    ref.current?.remove()
+                  }}
+                >
+                  Inside
+                </button>
+                <TabSentinel />
+              </div>
+            </Dialog>
+          </div>
+        )
+      }
+      render(<Example />)
+
+      // Verify it is open
+      assertDialog({ state: DialogState.Visible })
+
+      // Verify that the wrapper function has not been called yet
+      expect(wrapperFn).toHaveBeenCalledTimes(0)
+
+      // Click the button inside the the Dialog
+      await click(getByText('Inside'))
+
+      // Verify it is still open
+      assertDialog({ state: DialogState.Visible })
+
+      // Verify that the wrapper function has not been called yet
+      expect(wrapperFn).toHaveBeenCalledTimes(0)
+    })
+  )
 })
 
 describe('Nesting', () => {

diff --git a/packages/@headlessui-react/src/hooks/use-outside-click.ts b/packages/@headlessui-react/src/hooks/use-outside-click.ts
@@ -47,6 +47,10 @@ export function useOutsideClick(
 
     let target = event.target as HTMLElement
 
+    // Ignore if the target doesn't exist in the DOM anymore
+    if (!target.ownerDocument.documentElement.contains(target)) return
+
+    // Ignore if the target exists in one of the containers
     for (let container of _containers) {
       if (container === null) continue
       let domNode = container instanceof HTMLElement ? container : container.current

diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.test.ts b/packages/@headlessui-vue/src/components/dialog/dialog.test.ts
@@ -997,6 +997,54 @@ describe('Mouse interactions', () => {
       expect(wrapperFn).toHaveBeenCalledTimes(0)
     })
   )
+
+  it(
+    'should should be possible to click on removed elements without closing the Dialog',
+    suppressConsoleLogs(async () => {
+      let wrapperFn = jest.fn()
+      renderTemplate({
+        template: `
+          <div @click="wrapperFn">
+            <Dialog :open="isOpen" @close="setIsOpen">
+              <div ref="ref">
+                Contents
+                <!-- Remove this button before the Dialog's mousedown listener fires: -->
+                <button @mouseDown="$refs.ref.remove()">
+                  Inside
+                </button>
+                <TabSentinel />
+              </div>
+            </Dialog>
+          </div>
+        `,
+        setup() {
+          let isOpen = ref(true)
+          return {
+            isOpen,
+            wrapperFn,
+            setIsOpen(value: boolean) {
+              isOpen.value = value
+            },
+          }
+        },
+      })
+
+      // Verify it is open
+      assertDialog({ state: DialogState.Visible })
+
+      // Verify that the wrapper function has not been called yet
+      expect(wrapperFn).toHaveBeenCalledTimes(0)
+
+      // Click the button inside the the Dialog
+      await click(getByText('Inside'))
+
+      // Verify it is still open
+      assertDialog({ state: DialogState.Visible })
+
+      // Verify that the wrapper function has not been called yet
+      expect(wrapperFn).toHaveBeenCalledTimes(0)
+    })
+  )
 })
 
 describe('Nesting', () => {

diff --git a/packages/@headlessui-vue/src/hooks/use-outside-click.ts b/packages/@headlessui-vue/src/hooks/use-outside-click.ts
@@ -34,6 +34,10 @@ export function useOutsideClick(
     })
 
     let target = event.target as HTMLElement
+
+    // Ignore if the target doesn't exist in the DOM anymore
+    if (!target.ownerDocument.documentElement.contains(target)) return
+
     let _containers = (() => {
       if (Array.isArray(containers)) {
         return containers
@@ -46,6 +50,7 @@ export function useOutsideClick(
       return [containers]
     })()
 
+    // Ignore if the target exists in one of the containers
     for (let container of _containers) {
       if (container === null) continue
       let domNode = container instanceof HTMLElement ? container : dom(container)