Refactor useFocusAway to internally handle focusout event

Author: acelaya

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

@@ -7,16 +7,17 @@ import { useFocusAway } from '../use-focus-away';
 describe('useFocusAway', () => {
   let handler;
 
-  const events = [new Event('focus')];
-
   // Create a fake component to mount in tests that uses the hook
   function FakeComponent({ enabled = true }) {
     const myRef = useRef();
     const hookOpts = enabled === true ? undefined : { enabled };
     useFocusAway(myRef, handler, hookOpts);
     return (
-      <div ref={myRef}>
-        <button>Hi</button>
+      <div>
+        <button data-testid="outer-button">Hi</button>
+        <div ref={myRef} data-testid="container">
+          <button data-testid="inner-button">Hi</button>
+        </div>
       </div>
     );
   }
@@ -25,45 +26,62 @@ describe('useFocusAway', () => {
     return mount(<FakeComponent {...props} />);
   }
 
+  function getContainer(wrapper) {
+    return wrapper.find('[data-testid="container"]').getDOMNode();
+  }
+
+  function getOuterButton(wrapper) {
+    return wrapper.find('[data-testid="outer-button"]').getDOMNode();
+  }
+
+  function getInnerButton(wrapper) {
+    return wrapper.find('[data-testid="inner-button"]').getDOMNode();
+  }
+
   beforeEach(() => {
     handler = sinon.stub();
   });
 
-  events.forEach(event => {
-    it(`should invoke callback once for events outside of element (${event.type})`, () => {
-      const wrapper = createComponent();
-
+  it('should invoke callback when focus moves outside of container', () => {
+    const wrapper = createComponent();
+    const focusOut = () =>
       act(() => {
-        document.body.dispatchEvent(event);
+        getInnerButton(wrapper).dispatchEvent(
+          new FocusEvent('focusout', {
+            bubbles: true,
+            relatedTarget: getOuterButton(wrapper),
+          }),
+        );
       });
-      wrapper.update();
 
-      assert.calledOnce(handler);
+    focusOut();
+    wrapper.update();
 
-      // Update the component to change it and re-execute the hook
-      wrapper.setProps({ enabled: false });
+    assert.calledOnce(handler);
 
-      act(() => {
-        document.body.dispatchEvent(new Event('focus'));
-      });
+    // Update the component to change it and re-execute the hook
+    wrapper.setProps({ enabled: false });
 
-      // Cleanup of hook should have removed eventListeners, so the callback
-      // is not called again
-      assert.calledOnce(handler);
-    });
-  });
+    focusOut();
 
-  events.forEach(event => {
-    it(`should not invoke callback on events inside of container (${event.type})`, () => {
-      const wrapper = createComponent();
-      const button = wrapper.find('button');
+    // Cleanup of hook should have removed eventListeners, so the callback
+    // is not called again
+    assert.calledOnce(handler);
+  });
 
-      act(() => {
-        button.getDOMNode().dispatchEvent(event);
-      });
-      wrapper.update();
+  it('should not invoke callback when focus moves inside of container', () => {
+    const wrapper = createComponent();
 
-      assert.equal(handler.callCount, 0);
+    act(() => {
+      getContainer(wrapper).dispatchEvent(
+        new FocusEvent('focusout', {
+          bubbles: true,
+          relatedTarget: getInnerButton(wrapper),
+        }),
+      );
     });
+    wrapper.update();
+
+    assert.notCalled(handler);
   });
 });

src/hooks/use-focus-away.ts

@@ -4,46 +4,37 @@ import { useEffect } from 'preact/hooks';
 import { ListenerCollection } from '../util/listener-collection';
 
 type UseFocusAwayOptions = {
-  /**
-   * Enable listening for focus events outside of `container`? Can be set to
-   * false to disable
-   */
+  /** Enable listening for focusout events in `container`? */
   enabled?: boolean;
 };
 
 /**
- * Listen on document.body for focus events. If a focus event's target
- * is outside of the `container` element, invoke the `callback`. Do not listen
- * if not `enabled`.
+ * Listen on container for focusout events. If a focusout event's relatedTarget
+ * is outside of the `container` element, invoke the `callback`.
+ * Do not listen if not `enabled`.
  */
 export function useFocusAway(
   container: RefObject<HTMLElement | undefined>,
   callback: (e: FocusEvent) => void,
   { enabled = true }: UseFocusAwayOptions = {},
 ) {
   useEffect(() => {
-    if (!enabled) {
+    if (!enabled || !container.current) {
       return () => {};
     }
-    const target = document.body;
     const listeners = new ListenerCollection();
 
-    listeners.add(
-      target,
-      'focus',
-      event => {
-        if (
-          container.current &&
-          !container.current.contains(event.target as Node)
-        ) {
-          callback(event);
-        }
-      },
-      {
-        // Focus events don't bubble; they need to be handled in the capture phase
-        capture: true,
-      },
-    );
+    listeners.add(container.current, 'focusout', e => {
+      // Event type is not being properly inferred as FocusEvent
+      const event = e as FocusEvent;
+
+      if (
+        container.current &&
+        !container.current.contains(event.relatedTarget as Node)
+      ) {
+        callback(event);
+      }
+    });
 
     return () => {
       listeners.removeAll();