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

Commitec35a7f

Browse files
committed
fix: setup ParameterLabel to use htmlfor
1 parent9d10195 commitec35a7f

File tree

3 files changed

+27
-18
lines changed

3 files changed

+27
-18
lines changed

‎site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -514,6 +514,7 @@ export const MultiSelectCombobox = forwardRef<
514514
})}
515515
{/* Avoid having the "Search" Icon */}
516516
<CommandPrimitive.Input
517+
id={inputProps?.id}
517518
{...inputProps}
518519
ref={inputRef}
519520
value={inputValue}

‎site/src/components/Select/Select.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,11 @@ export const SelectValue = SelectPrimitive.Value;
1515

1616
exportconstSelectTrigger=React.forwardRef<
1717
React.ElementRef<typeofSelectPrimitive.Trigger>,
18-
React.ComponentPropsWithoutRef<typeofSelectPrimitive.Trigger>
19-
>(({ className, children, ...props},ref)=>(
18+
React.ComponentPropsWithoutRef<typeofSelectPrimitive.Trigger>&{id?:string}
19+
>(({ className, children,id,...props},ref)=>(
2020
<SelectPrimitive.Trigger
2121
ref={ref}
22+
id={id}
2223
className={cn(
2324
`flex h-10 w-full font-medium items-center justify-between whitespace-nowrap rounded-md
2425
border border-border border-solid bg-transparent px-3 py-2 text-sm shadow-sm

‎site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export const DynamicParameter: FC<DynamicParameterProps> = ({
6262
data-testid={`parameter-field-${parameter.name}`}
6363
>
6464
<ParameterLabel
65+
id={id}
6566
parameter={parameter}
6667
isPreset={isPreset}
6768
autofill={autofill}
@@ -86,12 +87,14 @@ interface ParameterLabelProps {
8687
parameter:PreviewParameter;
8788
isPreset?:boolean;
8889
autofill?:AutofillBuildParameter;
90+
id:string;
8991
}
9092

9193
constParameterLabel:FC<ParameterLabelProps>=({
9294
parameter,
9395
isPreset,
9496
autofill,
97+
id,
9598
})=>{
9699
consthasDescription=parameter.description&&parameter.description!=="";
97100
constdisplayName=parameter.display_name
@@ -109,7 +112,10 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
109112
)}
110113

111114
<divclassName="flex flex-col w-full gap-1">
112-
<LabelclassName="flex gap-2 flex-wrap text-sm font-medium">
115+
<Label
116+
htmlFor={id}
117+
className="flex gap-2 flex-wrap text-sm font-medium"
118+
>
113119
<spanclassName="flex">
114120
{displayName}
115121
{parameter.required&&(
@@ -197,15 +203,12 @@ const ParameterField: FC<ParameterFieldProps> = ({
197203
disabled,
198204
id,
199205
})=>{
200-
constinitialValue=
201-
value!==undefined ?value :validValue(parameter.value);
202-
const[localValue,setLocalValue]=useState(initialValue);
203-
204-
useEffect(()=>{
205-
if(value!==undefined){
206-
setLocalValue(value);
207-
}
208-
},[value]);
206+
const[localValue,setLocalValue]=useState(
207+
value!==undefined ?value :validValue(parameter.value)
208+
);
209+
if(value!==undefined&&value!==localValue){
210+
setLocalValue(value);
211+
}
209212

210213
switch(parameter.form_type){
211214
case"dropdown":
@@ -216,7 +219,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
216219
disabled={disabled}
217220
required={parameter.required}
218221
>
219-
<SelectTrigger>
222+
<SelectTriggerid={id}>
220223
<SelectValue
221224
placeholder={parameter.styling?.placeholder||"Select option"}
222225
/>
@@ -256,7 +259,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
256259
return(
257260
<MultiSelectCombobox
258261
inputProps={{
259-
id:`${id}-${parameter.name}`,
262+
id:id,
260263
}}
261264
options={options}
262265
defaultOptions={selectedOptions}
@@ -281,7 +284,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
281284

282285
return(
283286
<TagInput
284-
id={parameter.name}
287+
id={id}
285288
label={parameter.display_name||parameter.name}
286289
values={values}
287290
onChange={(values)=>{
@@ -294,6 +297,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
294297
case"switch":
295298
return(
296299
<Switch
300+
id={id}
297301
checked={value==="true"}
298302
onCheckedChange={(checked)=>{
299303
onChange(checked ?"true" :"false");
@@ -329,23 +333,24 @@ const ParameterField: FC<ParameterFieldProps> = ({
329333
return(
330334
<divclassName="flex items-center space-x-2">
331335
<Checkbox
332-
id={parameter.name}
336+
id={id}
333337
checked={value==="true"}
334338
onCheckedChange={(checked)=>{
335339
onChange(checked ?"true" :"false");
336340
}}
337341
disabled={disabled}
338342
/>
339-
<LabelhtmlFor={parameter.name}>{parameter.styling?.label}</Label>
343+
<LabelhtmlFor={id}>{parameter.styling?.label}</Label>
340344
</div>
341345
);
342346

343347
case"slider":
344348
return(
345349
<divclassName="flex flex-row items-baseline gap-3">
346350
<Slider
351+
id={id}
347352
className="mt-2"
348-
value={[Number(localValue??0)]}
353+
value={[Number(localValue)]}
349354
onValueChange={([value])=>{
350355
setLocalValue(value.toString());
351356
onChange(value.toString());
@@ -361,6 +366,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
361366
case"textarea":
362367
return(
363368
<Textarea
369+
id={id}
364370
className="max-w-2xl"
365371
value={localValue}
366372
onChange={(e)=>{
@@ -397,6 +403,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
397403

398404
return(
399405
<Input
406+
id={id}
400407
type={inputType}
401408
value={localValue}
402409
onChange={(e)=>{

0 commit comments

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