fix: add trapFocus to RadioButtonGroup

src/js/components/RadioButtonGroup/RadioButtonGroup.js

@@ -15,11 +15,12 @@ const RadioButtonGroup = forwardRef(
       defaultValue,
       disabled,
       focusIndicator = true,
+      gap,
       name,
       onChange,
       options: optionsProp,
+      trapFocus = false,
       value: valueProp,
-      gap,
       ...rest
     },
     ref,
@@ -83,7 +84,12 @@ const RadioButtonGroup = forwardRef(
       // Chrome behaves differently in that focus is given to radio buttons
       // when the user selects one, unlike Safari and Firefox.
       setTimeout(() => {
-        setFocus(true);
+        // In case the focus needs to be trapped inside the input instead of the
+        // Box wrapper
+        if (trapFocus) {
+          // console.log('optionRefs.current[0]', optionRefs.current[0]);
+          setFocus(optionRefs.current[0]);
+        } else setFocus(true);
       }, 1);
     };
 
@@ -92,7 +98,7 @@ const RadioButtonGroup = forwardRef(
       if (onChange) {
         event.persist(); // extract from React synthetic event pool
         // event.target.value gives value as a string which needs to be
-        // manually typecasted according to the type of original option value.
+        // manually typecasting according to the type of original option value.
         // return the original option value attached with the event.
         const adjustedEvent = event;
         adjustedEvent.value = optionValue;
@@ -140,7 +146,7 @@ const RadioButtonGroup = forwardRef(
                 optionValue === value ||
                 (value === undefined && !index) ||
                 // when nothing has been selected, show focus
-                // on the first radiobutton
+                // on the first radio-button
                 (value === '' && index === 0);
 
               if (optionRest.checked) {
@@ -165,7 +171,7 @@ const RadioButtonGroup = forwardRef(
                   // so that the FormField has focus style. However, we still
                   // need to visually indicate when a RadioButton is active.
                   // In RadioButton, if focus = true but focusIndicator = false,
-                  // we will apply the hover treament.
+                  // we will apply the hover treatment.
                   focusIndicator={focusIndicator}
                   id={id}
                   value={optionValue}

src/js/components/RadioButtonGroup/index.d.ts

@@ -17,6 +17,7 @@ export interface RadioButtonGroupProps {
         value: string | number | boolean;
       }
   )[];
+  trapFocus?: boolean;
   value?: string | number | boolean | object;
 }
 

src/js/components/RadioButtonGroup/propTypes.js

@@ -24,6 +24,7 @@ if (process.env.NODE_ENV !== 'production') {
         }),
       ),
     ]).isRequired,
+    trapFocus: PropTypes.bool,
     value: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.number,

src/js/components/RadioButtonGroup/stories/TrapFocus.js

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react';
+
+import { Box, RadioButtonGroup } from 'grommet';
+
+export const TrapFocus = () => {
+  const [value, setValue] = useState({ value: '' });
+
+  const input = React.useRef();
+
+  useEffect(() => {
+    setTimeout(() => {
+      input.current?.focus();
+      console.log('here', input.current);
+    }, 500);
+  }, []);
+
+  const postMethods = [
+    { label: 'FTP', value: 'FTP' },
+    {
+      label: 'File System',
+      value: 'FileSystem',
+    },
+    {
+      label: 'FTP & File System',
+      value: 'FTPCopy',
+    },
+  ];
+
+  // In this example there is no keyboard access to the RBG component
+  // The trapFocus should fix the initial focus
+  return (
+    <Box align="center" pad="large">
+      <RadioButtonGroup
+        ref={input}
+        name="radio"
+        options={postMethods}
+        value={value}
+        onChange={(event) => setValue(event.value)}
+        // trapFocus
+      />
+    </Box>
+  );
+};
+export default {
+  title: 'Input/RadioButtonGroup/Trap Focus',
+};