[Feat]: Add tabindex to the input field

iamfaran · iamfaran · commit 1746b64572b0 · 2025-05-07T22:59:53.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -32,6 +32,8 @@ import { hasIcon } from "comps/utils";
 import { InputRef } from "antd/es/input";
 import { RefControl } from "comps/controls/refControl";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
+import { numberSimpleControl } from "comps/controls/numberSimpleControl";
+import { NumberControl } from "comps/controls/codeControl";
 
 import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
@@ -55,8 +57,9 @@ const childrenMap = {
   labelStyle:styleControl(LabelStyle, 'labelStyle'), 
   prefixIcon: IconControl,
   suffixIcon: IconControl,
-  inputFieldStyle: styleControl(InputLikeStyle, 'inputFieldStyle') ,
+  inputFieldStyle: styleControl(InputLikeStyle, 'inputFieldStyle'),
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+  tabIndex: NumberControl,
 };
 
 let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
@@ -72,6 +75,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
         $style={props.inputFieldStyle}
         prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
         suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
+        tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
       />
     ),
     style: props.style,
@@ -99,6 +103,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
               {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
               {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
               {children.showCount.propertyView({ label: trans("prop.showCount") })}
+              {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
               {allowClearPropertyView(children)}
               {readOnlyPropertyView(children)}
             </Section>
diff --git a/client/packages/lowcoder/src/comps/utils/propertyUtils.tsx b/client/packages/lowcoder/src/comps/utils/propertyUtils.tsx
@@ -40,6 +40,7 @@ export const allowClearPropertyView = (children: {
   allowClear: InstanceType<typeof BoolControl>;
 }) => children.allowClear.propertyView({ label: trans("prop.showClear") });
 
+
 export const showSearchPropertyView = (children: {
   showSearch: InstanceType<typeof BoolControl>;
 }) => children.showSearch.propertyView({ label: trans("prop.showSearch") });
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -176,6 +176,7 @@ export const en = {
     "width": "Width",
     "selectApp": "Select App",
     "showCount": "Show Count",
+    "tabIndex": "Tab Index",
     "textType": "Text Type",
     "customRule": "Custom Rule",
     "customRuleTooltip": "Non-empty string indicates an error; empty or null means validation passed. Example: ",
