Fix no blur called on activeelement removed from dom

packages/@react-aria/focus/src/FocusScope.tsx

@@ -13,8 +13,9 @@
 import {FocusableElement} from '@react-types/shared';
 import {focusSafely} from './focusSafely';
 import {isElementVisible} from './isElementVisible';
-import React, {ReactNode, RefObject, useContext, useEffect, useMemo, useRef} from 'react';
+import React, {ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef} from 'react';
 import {useLayoutEffect} from '@react-aria/utils';
+import {useSyntheticBlurEvent} from '@react-aria/utils';
 
 
 export interface FocusScopeProps {
@@ -262,6 +263,23 @@ function useFocusContainment(scopeRef: RefObject<Element[]>, contain: boolean) {
   let focusedNode = useRef<FocusableElement>();
 
   let raf = useRef(null);
+
+  let onBlur = useCallback((e) => {
+    // Firefox doesn't shift focus back to the Dialog properly without this
+    raf.current = requestAnimationFrame(() => {
+      // Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
+      if (shouldContainFocus(scopeRef) && !isElementInChildScope(document.activeElement, scopeRef)) {
+        activeScope = scopeRef;
+        if (document.body.contains(e.target)) {
+          focusedNode.current = e.target;
+          focusedNode.current.focus();
+        } else if (activeScope) {
+          focusFirstInScope(activeScope.current);
+        }
+      }
+    });
+  }, [scopeRef, focusedNode]);
+  let onSyntheticFocus = useSyntheticBlurEvent(onBlur);
   useLayoutEffect(() => {
     let scope = scopeRef.current;
     if (!contain) {
@@ -305,6 +323,7 @@ function useFocusContainment(scopeRef: RefObject<Element[]>, contain: boolean) {
       if ((!activeScope || isAncestorScope(activeScope, scopeRef)) && isElementInScope(e.target, scopeRef.current)) {
         activeScope = scopeRef;
         focusedNode.current = e.target;
+        onSyntheticFocus(e);
       } else if (shouldContainFocus(scopeRef) && !isElementInChildScope(e.target, scopeRef)) {
         // If a focus event occurs outside the active scope (e.g. user tabs from browser location bar),
         // restore focus to the previously focused node or the first tabbable element in the active scope.
@@ -315,25 +334,10 @@ function useFocusContainment(scopeRef: RefObject<Element[]>, contain: boolean) {
         }
       } else if (shouldContainFocus(scopeRef)) {
         focusedNode.current = e.target;
+        onSyntheticFocus(e);
       }
     };
 
-    let onBlur = (e) => {
-      // Firefox doesn't shift focus back to the Dialog properly without this
-      raf.current = requestAnimationFrame(() => {
-        // Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
-        if (shouldContainFocus(scopeRef) && !isElementInChildScope(document.activeElement, scopeRef)) {
-          activeScope = scopeRef;
-          if (document.body.contains(e.target)) {
-            focusedNode.current = e.target;
-            focusedNode.current.focus();
-          } else if (activeScope) {
-            focusFirstInScope(activeScope.current);
-          }
-        }
-      });
-    };
-
     document.addEventListener('keydown', onKeyDown, false);
     document.addEventListener('focusin', onFocus, false);
     scope.forEach(element => element.addEventListener('focusin', onFocus, false));
@@ -344,7 +348,7 @@ function useFocusContainment(scopeRef: RefObject<Element[]>, contain: boolean) {
       scope.forEach(element => element.removeEventListener('focusin', onFocus, false));
       scope.forEach(element => element.removeEventListener('focusout', onBlur, false));
     };
-  }, [scopeRef, contain]);
+  }, [scopeRef, contain, onBlur]);
 
   // eslint-disable-next-line arrow-body-style
   useEffect(() => {
@@ -354,6 +358,15 @@ function useFocusContainment(scopeRef: RefObject<Element[]>, contain: boolean) {
       }
     };
   }, [raf]);
+
+  useEffect(() => {
+    // the autofocus attribute is too fast for our useLayoutEffect, so we check if some element in scope already has focus on mount
+    // and attach our blur fixer here
+    if (shouldContainFocus(scopeRef) && isElementInChildScope(document.activeElement, scopeRef)) {
+      let event = {target: document.activeElement};
+      onSyntheticFocus(event as React.FocusEvent);
+    }
+  }, []);
 }
 
 function isElementInAnyScope(element: Element) {

packages/@react-aria/focus/stories/FocusScope.stories.tsx

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {Button} from '@react-spectrum/button';
 import {FocusScope} from '../';
 import {Meta, Story} from '@storybook/react';
 import React, {ReactNode, useState} from 'react';
@@ -107,31 +108,26 @@ export function Example({isPortaled, contain}: StoryProps) {
 
 function FocusableFirstInScopeExample() {
   let [contentIndex, setContentIndex] = useState(0);
-  let [buttonRemoved, setButtonRemoved] = useState(false);
   function DialogContent(index = 0) {
-    const nextIndex = index === 2 ? 0 : index + 1;
+    const nextIndex = index + 1;
     return (
-      <>
+      <div key={index}>
         <h1 id={`heading-${index}`}>Dialog {index + 1}</h1>
-        {index === 2 ?
+        {index >= 2 ?
           (
             <>
               <p>The end of the road.</p>
-              <button id={`button-${index}`} key={`button-${index}`} onClick={(e) => {(e.target as Element).remove(); setButtonRemoved(true);}}>Remove Me</button>
-              {buttonRemoved &&
-                <p>With no tabbable elements within the scope, FocusScope will try to focus the first focusable element within the scope, in this case, the dialog itself.</p>
-              }
+              <p>With no tabbable elements within the scope, FocusScope will try to focus the first focusable element within the scope, in this case, the dialog itself.</p>
             </>
           ) :
           (
             <>
               <p>Content that will be replaced by <strong>Dialog {nextIndex + 1}</strong>.</p>
-              <button id={`button-${index}`} key={`button-${index}`} onClick={() => setContentIndex(nextIndex)}>Go to Dialog {nextIndex + 1}</button>
+              <Button variant="primary" id={`button-${index}`} onPress={() => setContentIndex(nextIndex)}>Go to Dialog {nextIndex + 1}</Button>
             </>
           )
         }
-
-      </>
+      </div>
     );
   }
   const contents = [];

packages/@react-aria/focus/test/FocusRing.test.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {act, render} from '@react-spectrum/test-utils';
+import {FocusRing} from '../';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+
+
+describe('FocusScope', function () {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+  afterEach(() => {
+    // make sure to clean up any raf's that may be running to restore focus on unmount
+    act(() => {jest.runAllTimers();});
+  });
+
+  describe('focus containment', function () {
+    it('should contain focus within the scope', function () {
+      let {getByTestId, rerender} = render(
+        <>
+          <FocusRing focusRingClass="bar">
+            <FocusRing focusRingClass="foo">
+              <input data-testid="input1" />
+            </FocusRing>
+          </FocusRing>
+        </>
+      );
+
+      let input1 = getByTestId('input1');
+      userEvent.tab();
+      expect(document.activeElement).toBe(input1);
+      rerender((<>
+        <FocusRing focusRingClass="bar"><div /></FocusRing>
+      </>));
+      expect(input1).not.toBeInTheDocument();
+    });
+  });
+});

packages/@react-aria/focus/test/FocusScope.test.js

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, render, waitFor} from '@react-spectrum/test-utils';
+import {act, fireEvent, render} from '@react-spectrum/test-utils';
 import {defaultTheme} from '@adobe/react-spectrum';
 import {DialogContainer} from '@react-spectrum/dialog';
 import {FocusScope, useFocusManager} from '../';
@@ -652,45 +652,45 @@ describe('FocusScope', function () {
 
     describe('focusable first in scope', function () {
       it('should restore focus to the first focusable or tabbable element within the scope when focus is lost within the scope', async function () {
-        let {getByTestId} = render(
-          <div>
-            <FocusScope contain>
-              <div role="dialog" data-testid="focusable" tabIndex={-1}>
-                <Item data-testid="tabbable1" autoFocus tabIndex={null}>Remove me!</Item>
-                <Item data-testid="item1" tabIndex={0}>Remove me, too!</Item>
-                <Item data-testid="item2" tabIndex={-1}>Remove me, three!</Item>
-              </div>
-            </FocusScope>
-          </div>
-        );
+        let tree = render(<Example />);
+        function Example(props) {
+          let [contentIndex, setContentIndex] = useState(0);
 
-        function Item(props) {
-          let focusManager = useFocusManager();
-          let onClick = e => {
-            focusManager.focusNext();
-            act(() => {
-              // remove fails to fire blur event in jest-dom
-              e.target.blur();
-              e.target.remove();
-              jest.runAllTimers();
-            });
-          };
-          return <button tabIndex={-1} {...props} onClick={onClick} />;
+          return (
+            <div>
+              <FocusScope contain>
+                <div role="dialog" data-testid="focusable" tabIndex={-1}>
+                  {contentIndex === 0 && <button key={0} data-testid="item1" autoFocus onClick={() => setContentIndex(1)}>First</button>}
+                  {contentIndex === 1 && <button key={1} data-testid="item2" tabIndex={0} onClick={() => setContentIndex(2)}>Second</button>}
+                  {contentIndex === 2 && <button key={2} data-testid="item3" tabIndex={-1} onClick={() => setContentIndex(3)}>Third</button>}
+                </div>
+              </FocusScope>
+            </div>
+          );
         }
-        let focusable = getByTestId('focusable');
-        let tabbable1 = getByTestId('tabbable1');
-        let item1 = getByTestId('item1');
-        let item2 = getByTestId('item2');
-        expect(document.activeElement).toBe(tabbable1);
-        fireEvent.click(tabbable1);
-        expect(tabbable1).not.toBeInTheDocument();
-        await waitFor(() => expect(document.activeElement).toBe(item1));
+        let focusable = tree.getByTestId('focusable');
+        let item1 = tree.getByTestId('item1');
+        expect(document.activeElement).toBe(item1);
+
         fireEvent.click(item1);
-        expect(item1).not.toBeInTheDocument();
-        await waitFor(() => expect(document.activeElement).toBe(item2));
+        // wait for the async MutationObserver
+        await act(async () => Promise.resolve());
+        act(() => {jest.runAllTimers();});
+        let item2 = tree.getByTestId('item2');
+        expect(document.activeElement).toBe(item2);
+
         fireEvent.click(item2);
-        expect(item2).not.toBeInTheDocument();
-        await waitFor(() => expect(document.activeElement).toBe(focusable));
+        await act(async () => Promise.resolve());
+        act(() => {jest.runAllTimers();});
+        expect(item1).not.toBeInTheDocument();
+        let item3 = tree.getByTestId('item3');
+        expect(document.activeElement).toBe(focusable);
+
+        fireEvent.click(item3);
+        await act(async () => Promise.resolve());
+        act(() => {jest.runAllTimers();});
+        expect(item3).not.toBeInTheDocument();
+        expect(document.activeElement).toBe(focusable);
       });
     });
   });

packages/@react-aria/interactions/src/useFocus.ts

@@ -17,7 +17,7 @@
 
 import {DOMAttributes, FocusEvents} from '@react-types/shared';
 import {FocusEvent, useCallback} from 'react';
-import {useSyntheticBlurEvent} from './utils';
+import {useSyntheticBlurEvent} from '@react-aria/utils';
 
 export interface FocusProps extends FocusEvents {
   /** Whether the focus events should be disabled. */

packages/@react-aria/interactions/src/useFocusWithin.ts

@@ -17,7 +17,7 @@
 
 import {DOMAttributes} from '@react-types/shared';
 import {FocusEvent, useCallback, useRef} from 'react';
-import {useSyntheticBlurEvent} from './utils';
+import {useSyntheticBlurEvent} from '@react-aria/utils';
 
 export interface FocusWithinProps {
   /** Whether the focus within events should be disabled. */