Merge pull request #34480 from shubham1206agra/fix-focus-behavior

Fixed focus behavior and optimize active element role implementation

src/App.tsx

@@ -6,6 +6,7 @@ import Onyx from 'react-native-onyx';
 import {PickerStateProvider} from 'react-native-picker-select';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import '../wdyr';
+import ActiveElementRoleProvider from './components/ActiveElementRoleProvider';
 import ActiveWorkspaceContextProvider from './components/ActiveWorkspace/ActiveWorkspaceProvider';
 import ColorSchemeWrapper from './components/ColorSchemeWrapper';
 import ComposeProviders from './components/ComposeProviders';
@@ -78,6 +79,7 @@ function App({url}: AppProps) {
                         PickerStateProvider,
                         EnvironmentProvider,
                         CustomStatusBarAndBackgroundContextProvider,
+                        ActiveElementRoleProvider,
                         ActiveWorkspaceContextProvider,
                     ]}
                 >

src/components/ActiveElementRoleProvider/index.native.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import type {ActiveElementRoleContextValue, ActiveElementRoleProps} from './types';
+
+const ActiveElementRoleContext = React.createContext<ActiveElementRoleContextValue>({
+    role: null,
+});
+
+function ActiveElementRoleProvider({children}: ActiveElementRoleProps) {
+    const value = React.useMemo(
+        () => ({
+            role: null,
+        }),
+        [],
+    );
+
+    return <ActiveElementRoleContext.Provider value={value}>{children}</ActiveElementRoleContext.Provider>;
+}
+
+export default ActiveElementRoleProvider;
+export {ActiveElementRoleContext};

src/components/ActiveElementRoleProvider/index.tsx

@@ -0,0 +1,40 @@
+import React, {useEffect, useState} from 'react';
+import type {ActiveElementRoleContextValue, ActiveElementRoleProps} from './types';
+
+const ActiveElementRoleContext = React.createContext<ActiveElementRoleContextValue>({
+    role: null,
+});
+
+function ActiveElementRoleProvider({children}: ActiveElementRoleProps) {
+    const [activeRoleRef, setRole] = useState<string | null>(document?.activeElement?.role ?? null);
+
+    const handleFocusIn = () => {
+        setRole(document?.activeElement?.role ?? null);
+    };
+
+    const handleFocusOut = () => {
+        setRole(null);
+    };
+
+    useEffect(() => {
+        document.addEventListener('focusin', handleFocusIn);
+        document.addEventListener('focusout', handleFocusOut);
+
+        return () => {
+            document.removeEventListener('focusin', handleFocusIn);
+            document.removeEventListener('focusout', handleFocusOut);
+        };
+    }, []);
+
+    const value = React.useMemo(
+        () => ({
+            role: activeRoleRef,
+        }),
+        [activeRoleRef],
+    );
+
+    return <ActiveElementRoleContext.Provider value={value}>{children}</ActiveElementRoleContext.Provider>;
+}
+
+export default ActiveElementRoleProvider;
+export {ActiveElementRoleContext};

src/components/ActiveElementRoleProvider/types.ts

@@ -0,0 +1,9 @@
+type ActiveElementRoleContextValue = {
+    role: string | null;
+};
+
+type ActiveElementRoleProps = {
+    children: React.ReactNode;
+};
+
+export type {ActiveElementRoleContextValue, ActiveElementRoleProps};

src/components/Button/index.tsx

@@ -265,14 +265,16 @@ function Button(
 
     return (
         <>
-            <KeyboardShortcutComponent
-                isDisabled={isDisabled}
-                isLoading={isLoading}
-                allowBubble={allowBubble}
-                onPress={onPress}
-                pressOnEnter={pressOnEnter}
-                enterKeyEventListenerPriority={enterKeyEventListenerPriority}
-            />
+            {pressOnEnter && (
+                <KeyboardShortcutComponent
+                    isDisabled={isDisabled}
+                    isLoading={isLoading}
+                    allowBubble={allowBubble}
+                    onPress={onPress}
+                    pressOnEnter={pressOnEnter}
+                    enterKeyEventListenerPriority={enterKeyEventListenerPriority}
+                />
+            )}
             <PressableWithFeedback
                 ref={ref}
                 onPress={(event) => {

src/hooks/useActiveElementRole/index.ts

@@ -1,32 +1,15 @@
-import {useEffect, useRef} from 'react';
+import {useContext} from 'react';
+import {ActiveElementRoleContext} from '@components/ActiveElementRoleProvider';
 import type UseActiveElementRole from './types';
 
 /**
  * Listens for the focusin and focusout events and sets the DOM activeElement to the state.
  * On native, we just return null.
  */
 const useActiveElementRole: UseActiveElementRole = () => {
-    const activeRoleRef = useRef(document?.activeElement?.role);
+    const {role} = useContext(ActiveElementRoleContext);
 
-    const handleFocusIn = () => {
-        activeRoleRef.current = document?.activeElement?.role;
-    };
-
-    const handleFocusOut = () => {
-        activeRoleRef.current = null;
-    };
-
-    useEffect(() => {
-        document.addEventListener('focusin', handleFocusIn);
-        document.addEventListener('focusout', handleFocusOut);
-
-        return () => {
-            document.removeEventListener('focusin', handleFocusIn);
-            document.removeEventListener('focusout', handleFocusOut);
-        };
-    }, []);
-
-    return activeRoleRef.current;
+    return role;
 };
 
 export default useActiveElementRole;

src/hooks/useActiveElementRole/types.ts

@@ -1,3 +1,3 @@
-type UseActiveElementRole = () => string | null | undefined;
+type UseActiveElementRole = () => string | null;
 
 export default UseActiveElementRole;