fix(radio-group): add forwardRef

BREAKING CHANGE: component is now using fowardRef
twilio-labs · Dec 17, 2020 · d467043 · d467043
1 parent 6061bfe
commit d467043
Showing 1 changed file with 27 additions and 33 deletions.
diff --git a/packages/paste-core/components/radio-group/src/RadioGroup.tsx b/packages/paste-core/components/radio-group/src/RadioGroup.tsx
@@ -8,41 +8,35 @@ export interface RadioGroupProps extends InlineControlGroupProps {
   onChange: (value: string) => void;
 }
 
-const RadioGroup: React.FC<RadioGroupProps> = ({
-  name,
-  value,
-  onChange,
-  disabled = false,
-  errorText,
-  children,
-  ...props
-}) => {
-  const onChangeHandler = React.useMemo(() => {
-    return (event: React.ChangeEvent<HTMLInputElement>): void => {
-      if (onChange != null) {
-        onChange(event.target.value);
-      }
-    };
-  }, [onChange]);
+const RadioGroup = React.forwardRef<HTMLFieldSetElement, RadioGroupProps>(
+  ({name, value, onChange, disabled = false, errorText, children, ...props}, ref) => {
+    const onChangeHandler = React.useMemo(() => {
+      return (event: React.ChangeEvent<HTMLInputElement>): void => {
+        if (onChange != null) {
+          onChange(event.target.value);
+        }
+      };
+    }, [onChange]);
 
-  const contextValue = React.useMemo(() => {
-    return {
-      name,
-      value: value || '',
-      disabled,
-      hasError: errorText != null,
-      onChange: onChangeHandler,
-    };
-  }, [name, value, disabled, errorText, onChangeHandler]);
+    const contextValue = React.useMemo(() => {
+      return {
+        name,
+        value: value || '',
+        disabled,
+        hasError: errorText != null,
+        onChange: onChangeHandler,
+      };
+    }, [name, value, disabled, errorText, onChangeHandler]);
 
-  return (
-    <RadioContext.Provider value={contextValue}>
-      <InlineControlGroup {...props} disabled={disabled} errorText={errorText} name={name}>
-        {children}
-      </InlineControlGroup>
-    </RadioContext.Provider>
-  );
-};
+    return (
+      <RadioContext.Provider value={contextValue}>
+        <InlineControlGroup {...props} disabled={disabled} errorText={errorText} name={name} ref={ref}>
+          {children}
+        </InlineControlGroup>
+      </RadioContext.Provider>
+    );
+  }
+);
 
 RadioGroup.displayName = 'RadioGroup';