[Feat]: Add tabindex for the time component

iamfaran · iamfaran · commit 29af2c7d609e · 2025-05-08T01:04:39.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
@@ -4,6 +4,7 @@ import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"
 import {
   BoolCodeControl,
   CustomRuleControl,
+  NumberControl,
   RangeControl,
   StringControl,
 } from "../../controls/codeControl";
@@ -92,6 +93,7 @@ const commonChildren = {
   suffixIcon: withDefault(IconControl, "/icon:regular/clock"),
   timeZone: dropdownControl(timeZoneOptions, Intl.DateTimeFormat().resolvedOptions().timeZone),
   viewRef: RefControl<CommonPickerMethods>,
+  tabIndex: NumberControl,
   ...validationChildren,
 };
 
@@ -212,6 +214,7 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
         onFocus={() => props.onEvent("focus")}
         onBlur={() => props.onEvent("blur")}
         suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
+        tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
       />
     ),
     showValidationWhenEmpty: props.showValidationWhenEmpty,
@@ -263,6 +266,7 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
           {commonAdvanceSection(children)}
           {children.use12Hours.propertyView({ label: trans("prop.use12Hours") })}
           {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
+          {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
         </Section>
       )}
 
@@ -368,6 +372,7 @@ const TimeRangeTmpCmp = (function () {
         onFocus={() => props.onEvent("focus")}
         onBlur={() => props.onEvent("blur")}
         suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
+        tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
       />
     );
 
@@ -439,6 +444,7 @@ const TimeRangeTmpCmp = (function () {
             {commonAdvanceSection(children)}
             {children.use12Hours.propertyView({ label: trans("prop.use12Hours") })}
             {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
+            {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
           </Section>
         )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx
@@ -39,6 +39,7 @@ export interface TimeRangeUIViewProps extends TimeCompViewProps {
   placeholder?: string | [string, string];
   onChange: (start?: dayjs.Dayjs | null, end?: dayjs.Dayjs | null) => void;
   handleTimeRangeZoneChange: (value:any) => void;
+  tabIndex?: number;
 }
 
 export const TimeRangeUIView = (props: TimeRangeUIViewProps) => {
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx
@@ -34,6 +34,7 @@ export interface TimeUIViewProps extends TimeCompViewProps {
   value: dayjs.Dayjs | null;
   onChange: (value: dayjs.Dayjs | null) => void;
   handleTimeZoneChange: (value:any) => void;
+  tabIndex?: number;
 }
 
 export const TimeUIView = (props: TimeUIViewProps) => {

Original file line number	Diff line number	Diff line change
`@@ -39,6 +39,7 @@ export interface TimeRangeUIViewProps extends TimeCompViewProps {`
`39`	`39`	`placeholder?: string \| [string, string];`
`40`	`40`	`onChange: (start?: dayjs.Dayjs \| null, end?: dayjs.Dayjs \| null) => void;`
`41`	`41`	`handleTimeRangeZoneChange: (value:any) => void;`
	`42`	`+ tabIndex?: number;`
`42`	`43`	`}`
`43`	`44`
`44`	`45`	`export const TimeRangeUIView = (props: TimeRangeUIViewProps) => {`
Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,7 @@ export interface TimeUIViewProps extends TimeCompViewProps {`
`34`	`34`	`value: dayjs.Dayjs \| null;`
`35`	`35`	`onChange: (value: dayjs.Dayjs \| null) => void;`
`36`	`36`	`handleTimeZoneChange: (value:any) => void;`
	`37`	`+ tabIndex?: number;`
`37`	`38`	`}`
`38`	`39`
`39`	`40`	`export const TimeUIView = (props: TimeUIViewProps) => {`