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

Commit25f1b76

Browse files
authored
fix: handle empty strings for Select component (#18553)
resolve#18361Its possible for a dynamic parameter option value to be an empty stringwhich will cause the following error in the Radix Select component. Thesolution is to handle empty strings so that they are not set directly inthe component.`Uncaught Error: A <Select.Item /> must have a value prop that is not anempty string. This is because the Select value can be set to an emptystring to clear the selection and show the placeholder.````data "coder_parameter" "radio" { name = "radio" display_name = "An example of a radio input" description = "The next parameter supports a single value." type = "string" form_type = "dropdown" order = 1 default = "" option { name = "Empty" value = "" }}```
1 parent6ed2204 commit25f1b76

File tree

1 file changed

+26
-8
lines changed

1 file changed

+26
-8
lines changed

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

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -379,11 +379,17 @@ const ParameterField: FC<ParameterFieldProps> = ({
379379
id,
380380
})=>{
381381
switch(parameter.form_type){
382-
case"dropdown":
382+
case"dropdown":{
383+
constEMPTY_VALUE_PLACEHOLDER="__EMPTY_STRING__";
384+
constselectValue=value==="" ?EMPTY_VALUE_PLACEHOLDER :value;
385+
consthandleSelectChange=(newValue:string)=>{
386+
onChange(newValue===EMPTY_VALUE_PLACEHOLDER ?"" :newValue);
387+
};
388+
383389
return(
384390
<Select
385-
onValueChange={onChange}
386-
value={value}
391+
onValueChange={handleSelectChange}
392+
value={selectValue}
387393
disabled={disabled}
388394
required={parameter.required}
389395
>
@@ -393,14 +399,26 @@ const ParameterField: FC<ParameterFieldProps> = ({
393399
/>
394400
</SelectTrigger>
395401
<SelectContent>
396-
{parameter.options.map((option)=>(
397-
<SelectItemkey={option.value.value}value={option.value.value}>
398-
<OptionDisplayoption={option}/>
399-
</SelectItem>
400-
))}
402+
{parameter.options.map((option,index)=>{
403+
constoptionValue=
404+
option.value.value===""
405+
?EMPTY_VALUE_PLACEHOLDER
406+
:option.value.value;
407+
return(
408+
<SelectItem
409+
key={
410+
option.value.value||`${EMPTY_VALUE_PLACEHOLDER}:${index}`
411+
}
412+
value={optionValue}
413+
>
414+
<OptionDisplayoption={option}/>
415+
</SelectItem>
416+
);
417+
})}
401418
</SelectContent>
402419
</Select>
403420
);
421+
}
404422

405423
case"multi-select":{
406424
constparsedValues=parseStringArrayValue(value??"");

0 commit comments

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