Fixes the remainder of the tests, however, i need to add one now for …

…nested modals

this should check to make sure that the outer one doesn't try to focus inside itself while the inner one is still open
fix lint

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

@@ -229,20 +229,6 @@ function useFocusContainment(scopeRef: RefObject<HTMLElement[]>, contain: boolea
     };
 
     let onFocus = (e) => {
-      // I think this onFocus is stealing the focus away from in DialogTrigger test,
-      // the dialog is closed, at which point focus should be restored to the trigger,
-      // it would appear that
-      /**
-       * dialog is blurred (this is the only blur called that makes it to document)
-       * dialog is focused (caught from local element listener)
-       * dialog is focused (global)
-       * button is focused (global)
-       * dialog is focused (local)
-       * dialog is focused (global)
-       *
-       * it's fired on so many things so fast that i don't think onFocus actually fires on the button?
-       */
-
       // 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.
       let isInAnyScope = isElementInAnyScope(e.target, scopes);
@@ -272,9 +258,6 @@ function useFocusContainment(scopeRef: RefObject<HTMLElement[]>, contain: boolea
     };
 
     document.addEventListener('keydown', onKeyDown, false);
-    /**
-     * removing the two global listeners fixes dialog trigger, but breaks FocusScope, Dialog containment, and Popover containment
-     */
     document.addEventListener('focusin', onFocus, false);
     scope.forEach(element => element.addEventListener('focusin', onFocus, false));
     scope.forEach(element => element.addEventListener('focusout', onBlur, false));

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

@@ -134,12 +134,7 @@ function setupGlobalFocusEvents() {
   // Register focus events on the window so they are sure to happen
   // before React's event listeners (registered on the document).
   window.addEventListener('focus', handleFocusEvent, true);
-  window.addEventListener('blur', handleWindowBlur, true); // reverting this fixes the Picker test that's failing
-  /**
-   * it's happening because as a capture, it's getting a window blur when it shouldn't, when the spectrum-Menu is focused
-   * I assume because of the blur on the trigger?
-   * also, this is getting fired a LOT
-   */
+  window.addEventListener('blur', handleWindowBlur, false);
 
   if (typeof PointerEvent !== 'undefined') {
     document.addEventListener('pointerdown', handlePointerEvent, true);

packages/@react-aria/utils/src/useId.ts

@@ -22,11 +22,11 @@ let map: Map<string, (v: string) => void> = new Map();
  */
 export function useId(defaultId?: string): string {
   let [value, setValue] = useState(defaultId);
-  // do i need to keep an entire queue? i think I only need the most recent?
-  // does this actually work in the case that we're not mid render? it's a ref, so it won't
+  // Do i need to keep an entire queue? i think I only need the most recent?
+  // Does this actually work in the case that we're not mid render? It's a ref, so it won't
   // cause a re-render ever on it's own, that said, we might always be mid-render
   // we seem to only call mergeProps/Ids in the render flow, but now we'll need to document that
-  // as a limitation of those functions
+  // as a limitation of those functions.
   let setIdUpdateQueue = useRef([]);
   let pushToQueue = useCallback((val) => {
     setIdUpdateQueue.current.push(val);
@@ -43,17 +43,6 @@ export function useId(defaultId?: string): string {
   return res;
 }
 
-// TODO this causes issues
-/**
- * In updating to react 17, calling setState from another component gets more complex, however, we do this pretty easily/accidentally
- mergeProps calls on mergeIds which calls setState
- we frequently call mergeProps during the render cycle
- that setState isn’t necessarily the state of the component rendering, ergo, bad setState call
- anyone have any ideas how to resolve this?
- technically we’d need to make that setState call behind a useEffeect, but mergeId’s isn’t a hook… so no useEffect
- we could put it around mergeProps, but that seems complicated and impossible to enforce
- o, and i can’t make mergeId’s a hook either, that’d be breaking i think
- */
 /**
  * Merges two ids.
  */

packages/@react-spectrum/button/stories/Button.stories.tsx

@@ -17,7 +17,6 @@ import {Flex} from '@react-spectrum/layout';
 import React from 'react';
 import {storiesOf} from '@storybook/react';
 import {Text} from '@react-spectrum/text';
-import {FocusScope} from "@react-aria/focus";
 
 storiesOf('Button', module)
   .addParameters({providerSwitcher: {status: 'positive'}})
@@ -89,17 +88,6 @@ storiesOf('Button', module)
   .add(
     'element: a, rel: \'noopener noreferrer\'',
     () => render({elementType: 'a', href: '//example.com', rel: 'noopener noreferrer', variant: 'primary'})
-  )
-  .add(
-    'focus scope',
-    () => (<div>
-      <input data-testid="outside" />
-      <FocusScope contain>
-        <input data-testid="input1" />
-        <input data-testid="input2" />
-        <input data-testid="input3" />
-      </FocusScope>
-    </div>)
   );
 
 function render(props: any = {}) {

packages/@react-spectrum/datepicker/test/DatePicker.test.js

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {act, fireEvent, render} from '@testing-library/react';
 import {DatePicker} from '../';
-import {fireEvent, render} from '@testing-library/react';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
@@ -275,7 +275,7 @@ describe('DatePicker', function () {
         let {getByLabelText, unmount} = render(<DatePicker value={value} onChange={onChange} formatOptions={format} />);
         let segment = getByLabelText(label);
         let textContent = segment.textContent;
-        segment.focus();
+        act(() => {segment.focus();});
 
         fireEvent.keyDown(segment, {key: options.upKey || 'ArrowUp'});
         expect(onChange).toHaveBeenCalledTimes(1);
@@ -293,7 +293,7 @@ describe('DatePicker', function () {
         ({getByLabelText, unmount} = render(<DatePicker defaultValue={value} onChange={onChange} formatOptions={format} />));
         segment = getByLabelText(label);
         textContent = segment.textContent;
-        segment.focus();
+        act(() => {segment.focus();});
 
         fireEvent.keyDown(segment, {key: options.upKey || 'ArrowUp'});
         expect(onChange).toHaveBeenCalledTimes(1);
@@ -306,7 +306,7 @@ describe('DatePicker', function () {
         ({getByLabelText, unmount} = render(<DatePicker defaultValue={value} onChange={onChange} formatOptions={format} />));
         segment = getByLabelText(label);
         textContent = segment.textContent;
-        segment.focus();
+        act(() => {segment.focus();});
 
         fireEvent.keyDown(segment, {key: options.downKey || 'ArrowDown'});
         expect(onChange).toHaveBeenCalledTimes(1);
@@ -319,7 +319,7 @@ describe('DatePicker', function () {
         ({getByLabelText, unmount} = render(<DatePicker defaultValue={value} isReadOnly onChange={onChange} formatOptions={format} />));
         segment = getByLabelText(label);
         textContent = segment.textContent;
-        segment.focus();
+        act(() => {segment.focus();});
 
         fireEvent.keyDown(segment, {key: options.upKey || 'ArrowUp'});
         expect(onChange).not.toHaveBeenCalled();
@@ -331,7 +331,7 @@ describe('DatePicker', function () {
         ({getByLabelText, unmount} = render(<DatePicker defaultValue={value} isReadOnly onChange={onChange} formatOptions={format} />));
         segment = getByLabelText(label);
         textContent = segment.textContent;
-        segment.focus();
+        act(() => {segment.focus();});
 
         fireEvent.keyDown(segment, {key: options.downKey || 'ArrowDown'});
         expect(onChange).not.toHaveBeenCalled();
@@ -488,7 +488,7 @@ describe('DatePicker', function () {
         let {getByLabelText, getAllByRole, unmount} = render(<DatePicker value={value} onChange={onChange} formatOptions={format} />);
         let segment = getByLabelText(label);
         let textContent = segment.textContent;
-        segment.focus();
+        act(() => {segment.focus();});
 
         let i = 0;
         for (let key of keys) {
@@ -518,7 +518,7 @@ describe('DatePicker', function () {
         ({getByLabelText, getAllByRole, unmount} = render(<DatePicker defaultValue={value} onChange={onChange} formatOptions={format} />));
         segment = getByLabelText(label);
         textContent = segment.textContent;
-        segment.focus();
+        act(() => {segment.focus();});
 
         i = 0;
         for (let key of keys) {
@@ -548,7 +548,7 @@ describe('DatePicker', function () {
         ({getByLabelText, getAllByRole, unmount} = render(<DatePicker defaultValue={value} isReadOnly onChange={onChange} formatOptions={format} />));
         segment = getByLabelText(label);
         textContent = segment.textContent;
-        segment.focus();
+        act(() => {segment.focus();});
 
         for (let key of keys) {
           fireEvent.keyDown(segment, {key});
@@ -641,7 +641,7 @@ describe('DatePicker', function () {
         let {getByLabelText, unmount} = render(<DatePicker value={value} onChange={onChange} formatOptions={format} />);
         let segment = getByLabelText(label);
         let textContent = segment.textContent;
-        segment.focus();
+        act(() => {segment.focus();});
 
         fireEvent.keyDown(segment, {key: 'Backspace'});
         expect(onChange).toHaveBeenCalledTimes(1);
@@ -654,7 +654,7 @@ describe('DatePicker', function () {
         ({getByLabelText, unmount} = render(<DatePicker defaultValue={value} onChange={onChange} formatOptions={format} />));
         segment = getByLabelText(label);
         textContent = segment.textContent;
-        segment.focus();
+        act(() => {segment.focus();});
 
         fireEvent.keyDown(segment, {key: 'Backspace'});
         expect(onChange).toHaveBeenCalledTimes(1);
@@ -716,7 +716,7 @@ describe('DatePicker', function () {
         );
         let segment = getByLabelText('العام');
         expect(segment).toHaveTextContent('٢٠١٩');
-        segment.focus();
+        act(() => {segment.focus();});
 
         fireEvent.keyDown(segment, {key: 'Backspace'});
         expect(onChange).toHaveBeenCalledTimes(1);
@@ -797,7 +797,7 @@ describe('DatePicker', function () {
       expect(combobox).toHaveTextContent(`1/1/${new Date().getFullYear()}`);
 
       let segments = getAllByRole('spinbutton');
-      segments[0].focus();
+      act(() => {segments[0].focus();});
 
       fireEvent.keyDown(document.activeElement, {key: 'Enter'});
       expect(segments[1]).toHaveFocus();
@@ -822,7 +822,7 @@ describe('DatePicker', function () {
       expect(combobox).toHaveTextContent(`1/1/${new Date().getFullYear()}`);
 
       let segments = getAllByRole('spinbutton');
-      segments[0].focus();
+      act(() => {segments[0].focus();});
 
       fireEvent.keyDown(document.activeElement, {key: 'ArrowUp'});
       fireEvent.keyDown(document.activeElement, {key: 'ArrowRight'});
@@ -850,7 +850,7 @@ describe('DatePicker', function () {
       expect(combobox).toHaveTextContent(`1/1/${new Date().getFullYear()}`);
 
       let segments = getAllByRole('spinbutton');
-      segments[0].focus();
+      act(() => {segments[0].focus();});
 
       fireEvent.keyDown(document.activeElement, {key: 'ArrowUp'});
       fireEvent.keyDown(document.activeElement, {key: 'ArrowRight'});
@@ -881,7 +881,7 @@ describe('DatePicker', function () {
       expect(combobox).toHaveTextContent(`1/1/${new Date().getFullYear()}`);
 
       let segments = getAllByRole('spinbutton');
-      segments[0].focus();
+      act(() => {segments[0].focus();});
 
       fireEvent.keyDown(document.activeElement, {key: '4'});
       expect(segments[1]).toHaveFocus();
@@ -914,7 +914,7 @@ describe('DatePicker', function () {
       expect(combobox).toHaveTextContent(`1/1/${new Date().getFullYear()}`);
 
       let segments = getAllByRole('spinbutton');
-      segments[0].focus();
+      act(() => {segments[0].focus();});
 
       fireEvent.keyDown(document.activeElement, {key: '4'});
       expect(segments[1]).toHaveFocus();

packages/@react-spectrum/dialog/test/DialogTrigger.test.js

@@ -19,7 +19,7 @@ import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
 import {triggerPress} from '@react-spectrum/test-utils';
-import userEvent from "@testing-library/user-event";
+import userEvent from '@testing-library/user-event';
 
 // whole thing hangs if run with rest of suite, but doesn't on its own
 describe('DialogTrigger', function () {
@@ -33,7 +33,8 @@ describe('DialogTrigger', function () {
 
   beforeEach(() => {
     matchMedia = new MatchMediaMock();
-    jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb());
+    // this needs to be a setTimeout so that the dialog can be removed from the dom before the callback is invoked
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => setTimeout(() => cb(), 0));
   });
 
   afterEach(() => {
@@ -239,7 +240,7 @@ describe('DialogTrigger', function () {
     let button = getByRole('button');
     act(() => {button.focus();});
     fireEvent.focusIn(button);
-    act(() => {userEvent.click(button)});
+    act(() => {userEvent.click(button);});
 
     act(() => {
       jest.runAllTimers();
@@ -264,6 +265,10 @@ describe('DialogTrigger', function () {
       expect(dialog).not.toBeInTheDocument();
     }); // wait for animation
 
+    act(() => {
+      jest.runAllTimers();
+    });
+
     expect(document.activeElement).toBe(button);
   });
 

packages/@react-spectrum/toast/test/Toast.test.js

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import React from 'react';
 import {act, render} from '@testing-library/react';
+import React from 'react';
 import {Toast} from '../';
 import {triggerPress} from '@react-spectrum/test-utils';
 import {Toast as V2Toast} from '@react/react-spectrum/Toast';