Selected disabled Radio in RadioGroup no longer impedes keyboard navi…

…gation (#3305) * Fix disabled, selected radio stopping keyboard nav * Change files
microsoft · Dec 14, 2023 · 531ff39 · 531ff39
1 parent 55b7326
commit 531ff39
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 14 deletions.
diff --git a/change/@fluentui-react-native-radio-group-7ddd4330-ac34-44d1-a571-15152858ce07.json b/change/@fluentui-react-native-radio-group-7ddd4330-ac34-44d1-a571-15152858ce07.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix disabled, selected radio stopping keyboard navigation",
+  "packageName": "@fluentui-react-native/radio-group",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/components/RadioGroup/src/Radio/useRadio.win32.ts b/packages/components/RadioGroup/src/Radio/useRadio.win32.ts
@@ -66,16 +66,19 @@ export const useRadio = (props: RadioProps): RadioInfo => {
   React.useEffect(() => {
     radioGroupContext.addRadioValue(value);
 
-    if (!isDisabled) {
-      radioGroupContext.addRadioEnabledValue(value);
-    }
-
     return () => {
       radioGroupContext.removeRadioValue(value);
-      radioGroupContext.removeRadioEnabledValue(value);
     };
   }, []);
 
+  React.useEffect(() => {
+    if (isDisabled) {
+      radioGroupContext.removeRadioEnabledValue(value);
+    } else {
+      radioGroupContext.addRadioEnabledValue(value);
+    }
+  }, [isDisabled]);
+
   const isRTL = I18nManager.isRTL;
 
   const onInvoke = React.useCallback(

diff --git a/packages/components/RadioGroup/src/RadioGroup/RadioGroup.tsx b/packages/components/RadioGroup/src/RadioGroup/RadioGroup.tsx
@@ -67,7 +67,11 @@ export const RadioGroup = compose<RadioGroupType>({
 
       const radioGroupContent = <Slots.options>{children}</Slots.options>;
       const radioGroupContentWithFocusZone = (
-        <Slots.container isCircularNavigation defaultTabbableElement={defaultTabbableElement}>
+        <Slots.container
+          disabled={radioGroup.state.selectedButtonDisabled}
+          isCircularNavigation
+          defaultTabbableElement={defaultTabbableElement}
+        >
           {radioGroupContent}
         </Slots.container>
       );

diff --git a/packages/components/RadioGroup/src/RadioGroup/RadioGroup.types.ts b/packages/components/RadioGroup/src/RadioGroup/RadioGroup.types.ts
@@ -63,6 +63,12 @@ export interface RadioGroupState extends RadioGroupProps {
    * @platform win32
    */
   invoked?: boolean;
+
+  /**
+   * Signals whether the currently selected radio is disabled. If this is the case, the FocusZone state is set to 'disabled'.
+   * @platform win32
+   */
+  selectedButtonDisabled?: boolean;
 }
 
 export interface RadioGroupTokens extends IForegroundColorTokens, FontTokens {

diff --git a/packages/components/RadioGroup/src/RadioGroup/useRadioGroup.ts b/packages/components/RadioGroup/src/RadioGroup/useRadioGroup.ts
@@ -47,16 +47,14 @@ export const useRadioGroup = (props: RadioGroupProps): RadioGroupInfo => {
 
   const onAddRadioValue = React.useCallback(
     (value: string) => {
-      values.push(value);
-      setValues(values);
+      setValues((values) => [...values, value]);
     },
     [setValues],
   );
 
   const onRemoveRadioValue = React.useCallback(
     (value: string) => {
-      values.filter((item) => item !== value);
-      setValues(values);
+      setValues((values) => values.filter((item) => item !== value));
     },
     [setValues],
   );
@@ -65,16 +63,14 @@ export const useRadioGroup = (props: RadioGroupProps): RadioGroupInfo => {
 
   const onAddRadioEnabledValue = React.useCallback(
     (value: string) => {
-      enabledValues.push(value);
-      setEnabledValues(enabledValues);
+      setEnabledValues((enabledValues) => [...enabledValues, value]);
     },
     [setEnabledValues],
   );
 
   const onRemoveRadioEnabledValue = React.useCallback(
     (value: string) => {
-      enabledValues.filter((item) => item !== value);
-      setEnabledValues(enabledValues);
+      setEnabledValues((enabledValues) => enabledValues.filter((item) => item !== value));
     },
     [setEnabledValues],
   );
@@ -94,6 +90,7 @@ export const useRadioGroup = (props: RadioGroupProps): RadioGroupInfo => {
     removeRadioValue: onRemoveRadioValue,
     addRadioEnabledValue: onAddRadioEnabledValue,
     removeRadioEnabledValue: onRemoveRadioEnabledValue,
+    selectedButtonDisabled: values.includes(data.selectedKey) && !enabledValues.includes(data.selectedKey),
   };
 
   return {