Ignore "outside click" on removed elements (#1193)

* ignore "outside click" on removed elements

Co-authored-by: Colin King <me@colinking.co>

* update changelog

Co-authored-by: Colin King <me@colinking.co>

Author: RobinMalfait

CHANGELOG.md

@@ -20,6 +20,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Reset Combobox Input when the value gets reset ([#1181](https://github.com/tailwindlabs/headlessui/pull/1181))
 - Fix double `beforeEnter` due to SSR ([#1183](https://github.com/tailwindlabs/headlessui/pull/1183))
 - Adjust active {item,option} index ([#1184](https://github.com/tailwindlabs/headlessui/pull/1184))
+- Only activate the `Tab` on mouseup ([#1192](https://github.com/tailwindlabs/headlessui/pull/1192))
+- Ignore "outside click" on removed elements ([#1193](https://github.com/tailwindlabs/headlessui/pull/1193))
 
 ## [Unreleased - @headlessui/vue]
 
@@ -36,6 +38,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Adjust active {item,option} index ([#1184](https://github.com/tailwindlabs/headlessui/pull/1184))
 - Fix re-focusing element after close ([#1186](https://github.com/tailwindlabs/headlessui/pull/1186))
 - Fix `Dialog` cycling ([#553](https://github.com/tailwindlabs/headlessui/pull/553))
+- Only activate the `Tab` on mouseup ([#1192](https://github.com/tailwindlabs/headlessui/pull/1192))
+- Ignore "outside click" on removed elements ([#1193](https://github.com/tailwindlabs/headlessui/pull/1193))
 
 ## [@headlessui/react@v1.5.0] - 2022-02-17
 

packages/@headlessui-react/src/components/dialog/dialog.test.tsx

@@ -806,6 +806,43 @@ describe('Mouse interactions', () => {
       expect(wrapperFn).toHaveBeenCalledTimes(0)
     })
   )
+
+  it(
+    'should should be possible to click on removed elements without closing the Dialog',
+    suppressConsoleLogs(async () => {
+      function Example() {
+        let [isOpen, setIsOpen] = useState(true)
+        let wrapper = useRef<HTMLDivElement | null>(null)
+
+        return (
+          <Dialog open={isOpen} onClose={setIsOpen}>
+            <div ref={wrapper}>
+              Contents
+              <button
+                onMouseDown={() => {
+                  // Remove this button before the Dialog's mousedown listener fires:
+                  wrapper.current?.remove()
+                }}
+              >
+                Inside
+              </button>
+              <TabSentinel />
+            </div>
+          </Dialog>
+        )
+      }
+      render(<Example />)
+
+      // Verify it is open
+      assertDialog({ state: DialogState.Visible })
+
+      // Click the button inside the the Dialog
+      await click(getByText('Inside'))
+
+      // Verify it is still open
+      assertDialog({ state: DialogState.Visible })
+    })
+  )
 })
 
 describe('Nesting', () => {

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

packages/@headlessui-vue/src/components/dialog/dialog.test.ts

@@ -997,6 +997,44 @@ describe('Mouse interactions', () => {
       expect(wrapperFn).toHaveBeenCalledTimes(0)
     })
   )
+
+  it(
+    'should should be possible to click on removed elements without closing the Dialog',
+    suppressConsoleLogs(async () => {
+      renderTemplate({
+        template: `
+          <Dialog :open="isOpen" @close="setIsOpen">
+            <div ref="wrapper">
+              Contents
+              <!-- Remove this button before the Dialog's mousedown listener fires: -->
+              <button @mousedown="wrapper.remove()">Inside</button>
+              <TabSentinel />
+            </div>
+          </Dialog>
+        `,
+        setup() {
+          let isOpen = ref(true)
+          let wrapper = ref<HTMLDivElement | null>(null)
+          return {
+            isOpen,
+            wrapper,
+            setIsOpen(value: boolean) {
+              isOpen.value = value
+            },
+          }
+        },
+      })
+
+      // Verify it is open
+      assertDialog({ state: DialogState.Visible })
+
+      // Click the button inside the the Dialog
+      await click(getByText('Inside'))
+
+      // Verify it is still open
+      assertDialog({ state: DialogState.Visible })
+    })
+  )
 })
 
 describe('Nesting', () => {

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)