[Feat]: Add tabindex for the switch, autocomp and rich editor

iamfaran · iamfaran · commit d62967b5e900 · 2025-05-08T00:22:37.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -20,7 +20,7 @@ import {
 import styled, { css } from "styled-components";
 import { UICompBuilder } from "../../generators";
 import { FormDataPropertyView } from "../formComp/formDataConstants";
-import { jsonControl } from "comps/controls/codeControl";
+import { jsonControl, NumberControl } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import {
   getStyle,
@@ -92,6 +92,7 @@ const childrenMap = {
   inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
   childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle'),
   animationStyle: styleControl(AnimationStyle , 'animationStyle'),
+  tabIndex: NumberControl,
 };
 
 const getValidate = (value: any): "" | "warning" | "error" | undefined => {
@@ -271,6 +272,7 @@ let AutoCompleteCompBase = (function () {
                 suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
                 status={getValidate(validateState)}
                 onPressEnter={undefined}
+                tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
               />
           </AutoComplete>
         </>
@@ -354,6 +356,9 @@ let AutoCompleteCompBase = (function () {
           >
             {children.animationStyle.getPropertyView()}
           </Section>
+          <Section name={sectionNames.advanced}>
+            {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
+          </Section>
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
@@ -1,4 +1,4 @@
-import { StringControl } from "comps/controls/codeControl";
+import { StringControl, NumberControl } from "comps/controls/codeControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { BoolCodeControl } from "../controls/codeControl";
 import { stringExposingStateControl } from "comps/controls/codeStateControl";
@@ -180,6 +180,7 @@ const childrenMap = {
   toolbar: withDefault(StringControl, JSON.stringify(toolbarOptions)),
   onEvent: ChangeEventHandlerControl,
   style: styleControl(RichTextEditorStyle , 'style'),
+  tabIndex: NumberControl,
 
   ...formDataChildren,
 };
@@ -196,6 +197,7 @@ interface IProps {
   onChange: (value: string) => void;
   $style: RichTextEditorStyleType;
   contentScrollBar: boolean;
+  tabIndex?: number;
 }
 
 const ReactQuillEditor = React.lazy(() => import("react-quill"));
@@ -226,6 +228,15 @@ function RichTextEditor(props: IProps) {
     [props.placeholder]
   );
 
+  useEffect(() => {
+    if (editorRef.current && props.tabIndex !== undefined) {
+      const editor = editorRef.current.getEditor();
+      if (editor && editor.scroll && editor.scroll.domNode) {
+        (editor.scroll.domNode as HTMLElement).tabIndex = props.tabIndex;
+      }
+    }
+  }, [props.tabIndex, key]); // Also re-run when key changes due to placeholder update
+
   const contains = (parent: HTMLElement, descendant: HTMLElement) => {
     try {
       // Firefox inserts inaccessible nodes around video elements
@@ -316,6 +327,7 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
       onChange={handleChange}
       $style={props.style}
       contentScrollBar={props.contentScrollBar}
+      tabIndex={props.tabIndex}
     />
   );
 })
@@ -334,6 +346,7 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
             {children.onEvent.getPropertyView()}
             {hiddenPropertyView(children)}
             {readOnlyPropertyView(children)}
+            {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
             {showDataLoadingIndicatorsPropertyView(children)}
           </Section>
         )}
diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
@@ -1,5 +1,5 @@
 import { default as Switch } from "antd/es/switch";
-import { BoolCodeControl } from "comps/controls/codeControl";
+import { BoolCodeControl, NumberControl } from "comps/controls/codeControl";
 import { booleanExposingStateControl } from "comps/controls/codeStateControl";
 import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { LabelControl } from "comps/controls/labelControl";
@@ -104,6 +104,7 @@ let SwitchTmpComp = (function () {
     ),
     viewRef: RefControl<HTMLElement>,
     inputFieldStyle: migrateOldData(styleControl(SwitchStyle, 'inputFieldStyle'), fixOldData),
+    tabIndex: NumberControl,
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props) => {
@@ -125,6 +126,7 @@ let SwitchTmpComp = (function () {
             checked={value}
             disabled={props.disabled}
             ref={props.viewRef}
+            tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
             onChange={(checked) => {
               props.value.onChange(checked);
               props.onEvent("change");
@@ -149,6 +151,7 @@ let SwitchTmpComp = (function () {
               {children.onEvent.getPropertyView()}
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
+              {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
               {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
           )}
