[Feat]: Add tabindex for the datecomp

iamfaran · iamfaran · commit 41cb3843a469 · 2025-05-08T01:13:13.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -4,6 +4,7 @@ import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"
 import {
   BoolCodeControl,
   CustomRuleControl,
+  NumberControl,
   RangeControl,
   StringControl,
 } from "../../controls/codeControl";
@@ -99,6 +100,7 @@ const commonChildren = {
   childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle'),
   timeZone: dropdownControl(timeZoneOptions, Intl.DateTimeFormat().resolvedOptions().timeZone),
   pickerMode: dropdownControl(PickerModeOptions, 'date'), 
+  tabIndex: NumberControl,
 };
 type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
 
@@ -185,6 +187,7 @@ export type DateCompViewProps = Pick<
   disabledTime: () => ReturnType<typeof disabledTime>;
   suffixIcon: ReactNode;
   placeholder?: string | [string, string];
+  tabIndex?: number;
 };
 
 const getFormattedDate = (
@@ -281,6 +284,7 @@ const DatePickerTmpCmp = 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,
@@ -340,6 +344,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
           <><Section name={sectionNames.advanced}>
             {timeFields(children, isMobile)}
             {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
+            {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
           </Section></>
         )}
         {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && !isMobile && commonAdvanceSection(children)}
@@ -475,7 +480,9 @@ let DateRangeTmpCmp = (function () {
         }}
         onFocus={() => props.onEvent("focus")}
         onBlur={() => props.onEvent("blur")}
-        suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}      />
+        suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
+        tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}      
+      />
     );
 
     const startResult = validate({ ...props, value: props.start });
@@ -553,6 +560,7 @@ let DateRangeTmpCmp = (function () {
             <><Section name={sectionNames.advanced}>
               {timeFields(children, isMobile)}
               {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
+              {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
             </Section></>
           )}
           {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && commonAdvanceSection(children)}
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
@@ -44,7 +44,8 @@ export interface DateRangeUIViewProps extends DateCompViewProps {
   placeholder?: string | [string, string];
   onChange: (start?: dayjs.Dayjs | null, end?: dayjs.Dayjs | null) => void;
   onPanelChange: (value: any, mode: [string, string]) => void;
-  onClickDateRangeTimeZone:(value:any)=>void
+  onClickDateRangeTimeZone:(value:any)=>void;
+  tabIndex?: number;
 }
 
 export const DateRangeUIView = (props: DateRangeUIViewProps) => {
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
@@ -39,7 +39,7 @@ export interface DataUIViewProps extends DateCompViewProps {
   onChange: DatePickerProps<Dayjs>['onChange'];
   onPanelChange: () => void;
   onClickDateTimeZone:(value:any)=>void;
-  
+  tabIndex?: number;
 }
 
 const DateMobileUIView = React.lazy(() =>

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,8 @@ export interface DateRangeUIViewProps extends DateCompViewProps {`
`44`	`44`	`placeholder?: string \| [string, string];`
`45`	`45`	`onChange: (start?: dayjs.Dayjs \| null, end?: dayjs.Dayjs \| null) => void;`
`46`	`46`	`onPanelChange: (value: any, mode: [string, string]) => void;`
`47`		`- onClickDateRangeTimeZone:(value:any)=>void`
	`47`	`+ onClickDateRangeTimeZone:(value:any)=>void;`
	`48`	`+ tabIndex?: number;`
`48`	`49`	`}`
`49`	`50`
`50`	`51`	`export const DateRangeUIView = (props: DateRangeUIViewProps) => {`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ export interface DataUIViewProps extends DateCompViewProps {`
`39`	`39`	`onChange: DatePickerProps<Dayjs>['onChange'];`
`40`	`40`	`onPanelChange: () => void;`
`41`	`41`	`onClickDateTimeZone:(value:any)=>void;`
`42`		`-`
	`42`	`+ tabIndex?: number;`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`const DateMobileUIView = React.lazy(() =>`