Fix up useId so that it runs immediately if it's not in a render cycle

update comments

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

@@ -257,6 +257,11 @@ function useFocusContainment(scopeRef: RefObject<HTMLElement[]>, contain: boolea
       }
     };
 
+    /**
+     * Need to add back in the stop propagation in some form.
+     * Need a test to make sure that the outer scope doesn't restore focus when there's an inner scope already.
+     */
+
     document.addEventListener('keydown', onKeyDown, false);
     document.addEventListener('focusin', onFocus, false);
     scope.forEach(element => element.addEventListener('focusin', onFocus, false));

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

@@ -21,25 +21,30 @@ let map: Map<string, (v: string) => void> = new Map();
  * @param defaultId - Default component id.
  */
 export function useId(defaultId?: string): string {
+  let isRendering = useRef(true);
+  isRendering.current = true;
   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
-  // 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.
-  let setIdUpdateQueue = useRef([]);
-  let pushToQueue = useCallback((val) => {
-    setIdUpdateQueue.current.push(val);
-  }, [setIdUpdateQueue.current]);
+  let nextId = useRef(null);
+  // don't memo this, we want it new each render so that the Effects always run
+  let updateValue = (val) => {
+    if (!isRendering.current) {
+      setValue(val);
+    } else {
+      nextId.current = val;
+    }
+  };
+  useLayoutEffect(() => {
+    isRendering.current = false;
+  }, [updateValue])
   useEffect(() => {
-    let newId = setIdUpdateQueue.current.pop();
+    let newId = nextId.current;
     if (newId) {
       setValue(newId);
+      nextId.current = null;
     }
-    setIdUpdateQueue.current = [];
-  }, [setValue, pushToQueue]);
+  }, [setValue, updateValue]);
   let res = useSSRSafeId(value);
-  map.set(res, pushToQueue);
+  map.set(res, updateValue);
   return res;
 }
 

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

@@ -226,7 +226,6 @@ describe('DialogTrigger', function () {
     expect(tray).toBeVisible();
   });
 
-  // see notes in focus scope, fails in .only mode as well
   it('should restore focus to the trigger when the dialog is closed', async function () {
     let {getByRole} = render(
       <Provider theme={theme}>
@@ -265,6 +264,7 @@ describe('DialogTrigger', function () {
       expect(dialog).not.toBeInTheDocument();
     }); // wait for animation
 
+    // now that it's been unmounted, run the raf callback
     act(() => {
       jest.runAllTimers();
     });