[Feat]: Add tabindex for the time component

Author: iamfaran

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>
         )}
 

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) => {

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) => {