[Feat]: Add tabindex for the radio component

Author: iamfaran

client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx

@@ -13,6 +13,7 @@ import { EllipsisTextCss, ValueFromOption } from "lowcoder-design";
 import { trans } from "i18n";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
+import { useEffect, useRef } from "react";
 
 const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => {
   return css`
@@ -102,6 +103,18 @@ let RadioBasicComp = (function () {
       validateState,
       handleChange,
     ] = useSelectInputValidate(props);
+    
+    const radioRef = useRef<HTMLDivElement | null>(null);
+    
+    useEffect(() => {
+      if (radioRef.current && typeof props.tabIndex === 'number') {
+        const firstRadioInput = radioRef.current.querySelector('input[type="radio"]');
+        if (firstRadioInput) {
+          firstRadioInput.setAttribute('tabindex', props.tabIndex.toString());
+        }
+      }
+    }, [props.tabIndex, props.options]);
+    
     return props.label({
       required: props.required,
       style: props.style,
@@ -110,7 +123,12 @@ let RadioBasicComp = (function () {
       animationStyle:props.animationStyle,
       children: (
         <Radio
-          ref={props.viewRef}
+          ref={(el) => {
+            if (el) {
+              props.viewRef(el);
+              radioRef.current = el;
+            }
+          }}
           disabled={props.disabled}
           value={props.value.value}
           $style={props.style}

client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx

@@ -1,5 +1,5 @@
 import { RecordConstructorToComp } from "lowcoder-core";
-import { BoolCodeControl } from "../../controls/codeControl";
+import { BoolCodeControl, NumberControl } from "../../controls/codeControl";
 import { LabelControl } from "../../controls/labelControl";
 import {
   arrayStringExposingStateControl,
@@ -43,6 +43,7 @@ export const RadioChildrenMap = {
   viewRef: RefControl<HTMLDivElement>,
   inputFieldStyle:styleControl(RadioStyle ,'inputFieldStyle' ),
   animationStyle: styleControl(AnimationStyle , 'animationStyle'),
+  tabIndex: NumberControl,
   ...SelectInputValidationChildren,
   ...formDataChildren,
 };
@@ -73,6 +74,9 @@ export const RadioPropertyView = (
         {disabledPropertyView(children)}
         {hiddenPropertyView(children)}
         {showDataLoadingIndicatorsPropertyView(children as any)}
+      </Section>
+      <Section name={sectionNames.advanced}>
+        {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
       </Section></>
     )}