Improving Firefox Popover synthetic blur on disabled button (#4670)

* Improving Firefox Popover open with blur on disabled

* comment improvements

Co-authored-by: Robert Snow <[email protected]>

* Update comment packages/@react-aria/focus/src/FocusScope.tsx

Co-authored-by: Devon Govett <[email protected]>

* updated relatedTaget for synthetic blurs

---------

Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Devon Govett <[email protected]>

Author: 3 people

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

@@ -382,8 +382,9 @@ function useFocusContainment(scopeRef: RefObject<Element[]>, contain: boolean) {
     };
   }, [scopeRef, contain]);
 
+  // This is a useLayoutEffect so it is guaranteed to run before our async synthetic blur
   // eslint-disable-next-line arrow-body-style
-  useEffect(() => {
+  useLayoutEffect(() => {
     return () => {
       if (raf.current) {
         cancelAnimationFrame(raf.current);

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

@@ -118,8 +118,9 @@ export function useSyntheticBlurEvent<Target = Element>(onBlur: (e: ReactFocusEv
       stateRef.current.observer = new MutationObserver(() => {
         if (stateRef.current.isFocused && target.disabled) {
           stateRef.current.observer.disconnect();
-          target.dispatchEvent(new FocusEvent('blur'));
-          target.dispatchEvent(new FocusEvent('focusout', {bubbles: true}));
+          let relatedTargetEl = target === document.activeElement ? null : document.activeElement;
+          target.dispatchEvent(new FocusEvent('blur', {relatedTarget: relatedTargetEl}));
+          target.dispatchEvent(new FocusEvent('focusout', {bubbles: true, relatedTarget: relatedTargetEl}));
         }
       });