Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit04e949d

Browse files
committed
[Feat]: Add tabindex for the radio component
1 parent96b48c8 commit04e949d

File tree

2 files changed

+24
-2
lines changed

2 files changed

+24
-2
lines changed

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

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { EllipsisTextCss, ValueFromOption } from "lowcoder-design";
1313
import{trans}from"i18n";
1414
import{fixOldInputCompData}from"../textInputComp/textInputConstants";
1515
import{migrateOldData}from"comps/generators/simpleGenerators";
16+
import{useEffect,useRef}from"react";
1617

1718
constgetStyle=(style:RadioStyleType,inputFieldStyle?:RadioStyleType)=>{
1819
returncss`
@@ -102,6 +103,18 @@ let RadioBasicComp = (function () {
102103
validateState,
103104
handleChange,
104105
]=useSelectInputValidate(props);
106+
107+
constradioRef=useRef<HTMLDivElement|null>(null);
108+
109+
useEffect(()=>{
110+
if(radioRef.current&&typeofprops.tabIndex==='number'){
111+
constfirstRadioInput=radioRef.current.querySelector('input[type="radio"]');
112+
if(firstRadioInput){
113+
firstRadioInput.setAttribute('tabindex',props.tabIndex.toString());
114+
}
115+
}
116+
},[props.tabIndex,props.options]);
117+
105118
returnprops.label({
106119
required:props.required,
107120
style:props.style,
@@ -110,7 +123,12 @@ let RadioBasicComp = (function () {
110123
animationStyle:props.animationStyle,
111124
children:(
112125
<Radio
113-
ref={props.viewRef}
126+
ref={(el)=>{
127+
if(el){
128+
props.viewRef(el);
129+
radioRef.current=el;
130+
}
131+
}}
114132
disabled={props.disabled}
115133
value={props.value.value}
116134
$style={props.style}

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import{RecordConstructorToComp}from"lowcoder-core";
2-
import{BoolCodeControl}from"../../controls/codeControl";
2+
import{BoolCodeControl,NumberControl}from"../../controls/codeControl";
33
import{LabelControl}from"../../controls/labelControl";
44
import{
55
arrayStringExposingStateControl,
@@ -43,6 +43,7 @@ export const RadioChildrenMap = {
4343
viewRef:RefControl<HTMLDivElement>,
4444
inputFieldStyle:styleControl(RadioStyle,'inputFieldStyle'),
4545
animationStyle:styleControl(AnimationStyle,'animationStyle'),
46+
tabIndex:NumberControl,
4647
...SelectInputValidationChildren,
4748
...formDataChildren,
4849
};
@@ -73,6 +74,9 @@ export const RadioPropertyView = (
7374
{disabledPropertyView(children)}
7475
{hiddenPropertyView(children)}
7576
{showDataLoadingIndicatorsPropertyView(childrenasany)}
77+
</Section>
78+
<Sectionname={sectionNames.advanced}>
79+
{children.tabIndex.propertyView({label:trans("prop.tabIndex")})}
7680
</Section></>
7781
)}
7882

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp