safer impl

Author: pan-kot

build-tools/jest/setup.js

@@ -6,12 +6,4 @@ if (typeof window !== 'undefined') {
   require('@testing-library/jest-dom/extend-expect');
   const { cleanup } = require('@testing-library/react');
   afterEach(cleanup);
-
-  // Autosuggest input blur handler uses document.hasFocus() to optimize user experience when focus leaves the page.
-  // In JSDOM the hasFocus() always returns false which differs from the in-browser experience, so setting it to true using mock.
-  // See: https://github.com/jsdom/jsdom/issues/3794
-  beforeEach(() => {
-    // eslint-disable-next-line no-undef
-    jest.spyOn(window.document, 'hasFocus').mockImplementation(() => true);
-  });
 }

src/autosuggest/__tests__/autosuggest.test.tsx

@@ -8,6 +8,7 @@ import { KeyCode } from '@cloudscape-design/test-utils-core/utils';
 
 import '../../__a11y__/to-validate-a11y';
 import Autosuggest, { AutosuggestProps } from '../../../lib/components/autosuggest';
+import { documentHasFocus } from '../../../lib/components/internal/utils/dom';
 import createWrapper from '../../../lib/components/test-utils/dom';
 
 import itemStyles from '../../../lib/components/internal/components/selectable-item/styles.css.js';
@@ -43,8 +44,15 @@ jest.mock('@cloudscape-design/component-toolkit/internal', () => {
     warnOnce: jest.fn(),
   };
 });
+
+jest.mock('../../../lib/components/internal/utils/dom', () => ({
+  ...jest.requireActual('../../../lib/components/internal/utils/dom'),
+  documentHasFocus: jest.fn(() => true),
+}));
+
 beforeEach(() => {
-  (warnOnce as any).mockClear();
+  (warnOnce as jest.Mock).mockClear();
+  (documentHasFocus as jest.Mock).mockClear();
 });
 
 test('renders correct labels when focused', () => {
@@ -131,7 +139,7 @@ test('should close dropdown on blur when document is in focus', () => {
 });
 
 test('should not close dropdown on blur when document is not in focus', () => {
-  jest.spyOn(document, 'hasFocus').mockImplementation(() => false);
+  (documentHasFocus as jest.Mock).mockImplementation(() => false);
 
   const { wrapper } = renderAutosuggest(<Autosuggest enteredTextLabel={v => v} value="1" options={defaultOptions} />);
   wrapper.findNativeInput().focus();

src/internal/components/autosuggest-input/index.tsx

@@ -18,6 +18,7 @@ import { FormFieldValidationControlProps, useFormFieldContext } from '../../cont
 import { BaseKeyDetail, fireCancelableEvent, fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';
 import { InternalBaseComponentProps } from '../../hooks/use-base-component';
 import { KeyCode } from '../../keycode';
+import { documentHasFocus } from '../../utils/dom';
 import { nodeBelongs } from '../../utils/node-belongs';
 import Dropdown from '../dropdown';
 import { ExpandToViewport } from '../dropdown/interfaces';
@@ -132,7 +133,7 @@ const AutosuggestInput = React.forwardRef(
     const handleBlur = () => {
       // When the document in not in focus it means the focus moved outside the page. In that case the dropdown shall stay open
       // so that when the user comes back it does not re-open unexpectedly when the focus is restored by the browser.
-      if (!document.hasFocus()) {
+      if (!documentHasFocus()) {
         return;
       }
       if (!preventCloseOnBlurRef.current) {

src/internal/utils/dom.ts

@@ -128,3 +128,10 @@ export function isSVGElement(target: unknown): target is SVGElement {
       typeof target.ownerSVGElement === 'object')
   );
 }
+
+export function documentHasFocus() {
+  // In JSDOM the hasFocus() always returns false which differs from the in-browser experience, see: https://github.com/jsdom/jsdom/issues/3794.
+  // Thus, when detecting JSDOM environment we return true here explicitly for the tests to work expectedly.
+  const isJSDOM = typeof navigator !== 'undefined' && navigator.userAgent.includes('jsdom');
+  return isJSDOM || document.hasFocus();
+}