fix(modal): close on blur (#704)

Author: jzempel

packages/modal/src/ModalContainer.spec.tsx

@@ -7,7 +7,7 @@
 
 import React, { createRef } from 'react';
 import userEvent from '@testing-library/user-event';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import { KEYS } from '@zendeskgarden/container-utilities';
 import { ModalContainer, IUseModalReturnValue } from './';
 
@@ -105,6 +105,16 @@ describe('FocusJailContainer', () => {
         expect(onCloseSpy).not.toHaveBeenCalled();
       });
     });
+
+    it('closes modal on blur', async () => {
+      render(<BasicExample onClose={onCloseSpy} />);
+
+      await waitFor(async () => {
+        await user.click(document.body);
+      });
+
+      expect(onCloseSpy).toHaveBeenCalled();
+    });
   });
 
   describe('getTitleProps()', () => {

packages/modal/src/useModal.ts

@@ -54,6 +54,7 @@ export const useModal = <T extends Element = Element>({
 
   const getModalProps: IUseModalReturnValue['getModalProps'] = ({
     role = 'dialog',
+    onBlur,
     onKeyDown,
     onMouseDown,
     ...other
@@ -63,6 +64,18 @@ export const useModal = <T extends Element = Element>({
     'aria-modal': true,
     'aria-labelledby': titleId,
     'aria-describedby': contentId,
+    onBlur: composeEventHandlers(onBlur, event => {
+      const doc = environment || document;
+
+      // Timeout is required to ensure blur is handled after focus
+      setTimeout(() => {
+        const activeElement = doc.activeElement;
+
+        if (!modalRef.current?.contains(activeElement)) {
+          closeModal(event);
+        }
+      });
+    }),
     onMouseDown: composeEventHandlers(onMouseDown, () => {
       isModalMousedDownRef.current = true;
     }),