Skip to content

Commit 55b6b54

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge pull request #1911 from iamfaran/feat/1883-tab-index
[Feat]: #1883 add tab-index on buttons/checkbox/select
2 parents c9fab1f + f3d08e9 commit 55b6b54

File tree

6 files changed

+45
-9
lines changed

6 files changed

+45
-9
lines changed

‎client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
1+
import { BoolCodeControl, StringControl, NumberControl } from "comps/controls/codeControl";
22
import { dropdownControl } from "comps/controls/dropdownControl";
33
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
44
import { IconControl } from "comps/controls/iconControl";
@@ -137,7 +137,8 @@ const childrenMap = {
137137
disabledStyle: DisabledButtonStyleControl,
138138
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
139139
viewRef: RefControl<HTMLElement>,
140-
tooltip: StringControl
140+
tooltip: StringControl,
141+
tabIndex: NumberControl
141142
};
142143

143144
type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>>;
@@ -162,8 +163,12 @@ const ButtonPropertyView = React.memo((props: {
162163
disabledPropertyView(props.children),
163164
hiddenPropertyView(props.children),
164165
loadingPropertyView(props.children),
166+
props.children.tabIndex.propertyView({ label: trans("prop.tabIndex") }),
165167
]
166-
: props.children.form.getPropertyView()}
168+
: [
169+
props.children.form.getPropertyView(),
170+
props.children.tabIndex.propertyView({ label: trans("prop.tabIndex") }),
171+
]}
167172
</Section>
168173
</>
169174
)}
@@ -222,6 +227,7 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
222227
(!isDefault(props.type) && getForm(editorState, props.form)?.disableSubmit())
223228
}
224229
onClick={handleClick}
230+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
225231
>
226232
{props.prefixIcon && <IconWrapper>{props.prefixIcon}</IconWrapper>}
227233
{

‎client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { default as Button } from "antd/es/button";
22
import { ButtonCompWrapper, buttonRefMethods } from "comps/comps/buttonComp/buttonCompConstants";
3-
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
3+
import { BoolCodeControl, StringControl, NumberControl } from "comps/controls/codeControl";
44
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
55
import { styleControl } from "comps/controls/styleControl";
66
import { AnimationStyle, AnimationStyleType, LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants";
@@ -91,6 +91,7 @@ const LinkTmpComp = (function () {
9191
prefixIcon: IconControl,
9292
suffixIcon: IconControl,
9393
viewRef: RefControl<HTMLElement>,
94+
tabIndex: NumberControl,
9495
};
9596
return new UICompBuilder(childrenMap, (props) => {
9697
// chrome86 bug: button children should not contain only empty span
@@ -105,6 +106,7 @@ const LinkTmpComp = (function () {
105106
disabled={props.disabled}
106107
onClick={() => props.onEvent("click")}
107108
type={"link"}
109+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
108110
>
109111
{hasChildren && (
110112
<span>
@@ -131,6 +133,7 @@ const LinkTmpComp = (function () {
131133
{hiddenPropertyView(children)}
132134
{loadingPropertyView(children)}
133135
{showDataLoadingIndicatorsPropertyView(children)}
136+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
134137
</Section>
135138
<Section name={sectionNames.advanced}>
136139
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}

‎client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
1+
import { BoolCodeControl, StringControl, NumberControl } from "comps/controls/codeControl";
22
import { withDefault } from "comps/generators";
33
import { UICompBuilder } from "comps/generators/uiCompBuilder";
44
import {
@@ -68,6 +68,7 @@ const ToggleTmpComp = (function () {
6868
showBorder: withDefault(BoolControl, true),
6969
viewRef: RefControl<HTMLElement>,
7070
tooltip: StringControl,
71+
tabIndex: NumberControl,
7172
};
7273
return new UICompBuilder(childrenMap, (props) => {
7374
const text = props.showText
@@ -92,6 +93,7 @@ const ToggleTmpComp = (function () {
9293
props.onEvent("change");
9394
props.value.onChange(!props.value.value);
9495
}}
96+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
9597
>
9698
{props.iconPosition === "right" && text}
9799
{<IconWrapper>{props.value.value ? props.trueIcon : props.falseIcon}</IconWrapper>}
@@ -117,6 +119,7 @@ const ToggleTmpComp = (function () {
117119
{hiddenPropertyView(children)}
118120
{loadingPropertyView(children)}
119121
{showDataLoadingIndicatorsPropertyView(children)}
122+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
120123
</Section>
121124
<Section name={sectionNames.advanced}>
122125
{children.showText.propertyView({ label: trans("toggleButton.showText") })}

‎client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
1+
import { BoolCodeControl, StringControl, NumberControl } from "comps/controls/codeControl";
22
import { dropdownControl } from "comps/controls/dropdownControl";
33
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
44
import { IconControl } from "comps/controls/iconControl";
@@ -204,7 +204,8 @@ const childrenMap = {
204204
style: ButtonStyleControl,
205205
viewRef: RefControl<HTMLElement>,
206206
restrictPaddingOnRotation:withDefault(StringControl, 'controlButton'),
207-
tooltip: StringControl
207+
tooltip: StringControl,
208+
tabIndex: NumberControl
208209
};
209210

210211
let ButtonTmpComp = (function () {
@@ -294,6 +295,7 @@ let ButtonTmpComp = (function () {
294295
? handleClickEvent()
295296
: submitForm(editorState, props.form)
296297
}
298+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
297299
>
298300
{props.sourceMode === 'standard' && props.prefixIcon && (
299301
<IconWrapper
@@ -342,6 +344,7 @@ let ButtonTmpComp = (function () {
342344
{disabledPropertyView(children)}
343345
{hiddenPropertyView(children)}
344346
{loadingPropertyView(children)}
347+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
345348
</Section>
346349
)}
347350

‎client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,8 +214,20 @@ let CheckboxBasicComp = (function () {
214214

215215
return new UICompBuilder(childrenMap, (props) => {
216216
const mountedRef = useRef(true);
217+
const checkboxRef = useRef<HTMLDivElement | null>(null);
217218
const [validateState, handleChange] = useSelectInputValidate(props);
218219

220+
useEffect(() => {
221+
if (!mountedRef.current) return;
222+
if (checkboxRef.current && typeof props.tabIndex === 'number') {
223+
const checkboxInputs = checkboxRef.current.querySelectorAll('input[type="checkbox"]');
224+
checkboxInputs.forEach((input, index) => {
225+
// Set sequential tabindex for each checkbox
226+
input.setAttribute('tabindex', (props.tabIndex + index).toString());
227+
});
228+
}
229+
}, [props.tabIndex, props.options]);
230+
219231
useEffect(() => {
220232
return () => {
221233
mountedRef.current = false;
@@ -251,7 +263,13 @@ let CheckboxBasicComp = (function () {
251263
layout={props.layout}
252264
options={filteredOptions()}
253265
onChange={handleValidateChange}
254-
viewRef={props.viewRef}
266+
viewRef={(el) => {
267+
if (!mountedRef.current) return;
268+
if (el) {
269+
props.viewRef(el);
270+
checkboxRef.current = el;
271+
}
272+
}}
255273
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
256274
/>
257275
),

‎client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
} from "lowcoder-core";
77
import { BoolControl } from "../../controls/boolControl";
88
import { LabelControl } from "../../controls/labelControl";
9-
import { BoolCodeControl, StringControl } from "../../controls/codeControl";
9+
import { BoolCodeControl, StringControl, NumberControl } from "../../controls/codeControl";
1010
import { PaddingControl } from "../../controls/paddingControl";
1111
import { MarginControl } from "../../controls/marginControl";
1212
import {
@@ -242,6 +242,7 @@ export const SelectChildrenMap = {
242242
margin: MarginControl,
243243
padding: PaddingControl,
244244
inputFieldStyle:styleControl(SelectStyle),
245+
tabIndex: NumberControl,
245246
...SelectInputValidationChildren,
246247
...formDataChildren,
247248
};
@@ -269,6 +270,7 @@ export const SelectUIView = (
269270
placeholder={props.placeholder}
270271
value={props.value}
271272
showSearch={props.showSearch}
273+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
272274
filterOption={(input, option) => {
273275
if (!option) return false;
274276
return String(option.label ?? option.value ?? "").toLowerCase().includes(input.toLowerCase());
@@ -348,6 +350,7 @@ export const SelectPropertyView = (
348350
{disabledPropertyView(children)}
349351
{hiddenPropertyView(children)}
350352
{showDataLoadingIndicatorsPropertyView(children as any)}
353+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
351354
</Section>
352355
</>
353356
)}

0 commit comments

Comments
 (0)