Skip to content

Commit ec35a7f

Browse files
jaaydenhjaaydenh
committed
fix: setup ParameterLabel to use htmlfor
1 parent 9d10195 commit ec35a7f

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
export const SelectTrigger = React.forwardRef<
1717
React.ElementRef<typeof SelectPrimitive.Trigger>,
18-
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
19-
>(({ className, children, ...props }, ref) => (
18+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.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
const ParameterLabel: FC<ParameterLabelProps> = ({
9294
parameter,
9395
isPreset,
9496
autofill,
97+
id,
9598
}) => {
9699
const hasDescription = parameter.description && parameter.description !== "";
97100
const displayName = parameter.display_name
@@ -109,7 +112,10 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
109112
)}
110113

111114
<div className="flex flex-col w-full gap-1">
112-
<Label className="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
<span className="flex">
114120
{displayName}
115121
{parameter.required && (
@@ -197,15 +203,12 @@ const ParameterField: FC<ParameterFieldProps> = ({
197203
disabled,
198204
id,
199205
}) => {
200-
const initialValue =
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+
<SelectTrigger id={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
<div className="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-
<Label htmlFor={parameter.name}>{parameter.styling?.label}</Label>
343+
<Label htmlFor={id}>{parameter.styling?.label}</Label>
340344
</div>
341345
);
342346

343347
case "slider":
344348
return (
345349
<div className="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)