From 659d0e6aabae90919b8d09e9986761de9f669ac3 Mon Sep 17 00:00:00 2001
From: Chen Saranga <chensar@monday.com>
Date: Wed, 10 Apr 2024 13:15:50 +0300
Subject: [PATCH] feat: add autoFocus to RadioButton

---
 .../src/components/RadioButton/RadioButton.tsx   | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/RadioButton/RadioButton.tsx b/packages/core/src/components/RadioButton/RadioButton.tsx
index a845dd55bf..d06f6997cc 100644
--- a/packages/core/src/components/RadioButton/RadioButton.tsx
+++ b/packages/core/src/components/RadioButton/RadioButton.tsx
@@ -1,5 +1,5 @@
 import cx from "classnames";
-import React, { forwardRef, useCallback, useMemo, useRef } from "react";
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
 import useMergeRef from "../../hooks/useMergeRef";
 import Clickable from "../Clickable/Clickable";
 import Text from "../Text/Text";
@@ -27,6 +27,8 @@ export interface RadioButtonProps extends VibeComponentProps {
   value?: string;
   /** A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. */
   name?: string;
+  /** is autoFocus */
+  autoFocus?: boolean;
   /** is disabled */
   disabled?: boolean;
   /** why the input is disabled */
@@ -64,6 +66,7 @@ const RadioButton: VibeComponent<RadioButtonProps, HTMLElement> & object = forwa
        */
       radioButtonClassName,
       disabled = false,
+      autoFocus = false,
       disabledReason,
       defaultChecked = false,
       children,
@@ -80,6 +83,16 @@ const RadioButton: VibeComponent<RadioButtonProps, HTMLElement> & object = forwa
     const inputRef = useRef<HTMLInputElement | null>();
     const mergedRef = useMergeRef(ref, inputRef);
     const overrideClassName = backwardCompatibilityForProperties([className, componentClassName]);
+
+    useEffect(() => {
+      if (!inputRef?.current || !autoFocus) {
+        return;
+      }
+
+      const animationFrame = requestAnimationFrame(() => inputRef.current.focus());
+      return () => cancelAnimationFrame(animationFrame);
+    }, [inputRef, autoFocus]);
+
     const onChildClick = useCallback(() => {
       if (disabled || !retainChildClick) return;
       if (inputRef.current) {
@@ -114,6 +127,7 @@ const RadioButton: VibeComponent<RadioButtonProps, HTMLElement> & object = forwa
               type="radio"
               value={value}
               name={name}
+              autoFocus={autoFocus}
               disabled={disabled}
               {...checkedProps}
               onChange={onSelect}