Use event.composePath in useClickAway to determine if component is in container

Author: acelaya

src/hooks/test/use-click-away-test.js

@@ -6,8 +6,10 @@ import { useClickAway } from '../use-click-away';
 
 describe('useClickAway', () => {
   let handler;
+  let wrapper;
 
-  const events = [new Event('mousedown'), new Event('click')];
+  const event = name => new Event(name, { bubbles: true });
+  const events = [event('mousedown'), event('click')];
 
   // Create a fake component to mount in tests that uses the hook
   function FakeComponent({ enabled = true }) {
@@ -22,13 +24,21 @@ describe('useClickAway', () => {
   }
 
   function createComponent(props) {
-    return mount(<FakeComponent {...props} />);
+    const container = document.createElement('div');
+    document.body.append(container);
+
+    wrapper = mount(<FakeComponent {...props} />, { attachTo: container });
+    return wrapper;
   }
 
   beforeEach(() => {
     handler = sinon.stub();
   });
 
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
   events.forEach(event => {
     it(`should invoke callback once for events outside of element (${event.type})`, () => {
       const wrapper = createComponent();
@@ -50,9 +60,7 @@ describe('useClickAway', () => {
       // is not called again
       assert.calledOnce(handler);
     });
-  });
 
-  events.forEach(event => {
     it(`should not invoke callback on events inside of container (${event.type})`, () => {
       const wrapper = createComponent();
       const button = wrapper.find('button');
@@ -62,7 +70,25 @@ describe('useClickAway', () => {
       });
       wrapper.update();
 
-      assert.equal(handler.callCount, 0);
+      assert.notCalled(handler);
+    });
+
+    it(`should not invoke callback if clicked element is removed from container (${event.type})`, () => {
+      const wrapper = createComponent();
+      const button = wrapper.find('button').getDOMNode();
+
+      act(() => {
+        button.addEventListener(event.type, () => {
+          // Remove the button from the DOM before next listeners are invoked,
+          // to simulate what happens if the clicked element was removed as a
+          // result of a state update + re-render in a child component
+          button.remove();
+        });
+        button.dispatchEvent(event);
+      });
+      wrapper.update();
+
+      assert.notCalled(handler);
     });
   });
 });

src/hooks/use-click-away.ts

@@ -28,7 +28,12 @@ export function useClickAway(
     const handleAwayClick = (event: Event) => {
       if (
         container.current &&
-        !container.current.contains(event.target as Node)
+        // We test the composed path here to handle the case where the clicked
+        // element was in fact in the container, but is removed from the DOM
+        // (eg. by a re-render in a child component) before this callback is run.
+        // The composed path reflects the DOM hierarchy at the time the event was
+        // dispatched.
+        !event.composedPath().includes(container.current)
       ) {
         callback(event);
       }