diff --git a/ui/src/formkit/inputs/select/SelectDropdownContainer.vue b/ui/src/formkit/inputs/select/SelectDropdownContainer.vue index 1a3438017e..2ef8a6b3bd 100644 --- a/ui/src/formkit/inputs/select/SelectDropdownContainer.vue +++ b/ui/src/formkit/inputs/select/SelectDropdownContainer.vue @@ -43,9 +43,12 @@ const filterOptions = computed(() => { } const options = props.options.filter((option) => { - return option.label - .toLocaleLowerCase() - .includes(keyword.toLocaleLowerCase()); + if (option.label) { + return option.label + .toLocaleLowerCase() + .includes(keyword.toLocaleLowerCase()); + } + return false; }); if (props.allowCreate) { diff --git a/ui/src/formkit/inputs/select/SelectMain.vue b/ui/src/formkit/inputs/select/SelectMain.vue index b5cbabae4c..54658d722a 100644 --- a/ui/src/formkit/inputs/select/SelectMain.vue +++ b/ui/src/formkit/inputs/select/SelectMain.vue @@ -555,6 +555,18 @@ watch( } ); +watch( + () => options.value, + async (newOptions) => { + if (newOptions && newOptions.length > 0) { + const selectedOption = await fetchSelectedOptions(); + if (selectedOption) { + selectOptions.value = selectedOption; + } + } + } +); + const enableAutoSelect = () => { if (!selectProps.autoSelect) { return false; @@ -575,11 +587,6 @@ watch( () => options.value, async (newOptions) => { if (newOptions && newOptions.length > 0) { - const selectedOption = await fetchSelectedOptions(); - if (selectedOption) { - selectOptions.value = selectedOption; - } - if (enableAutoSelect()) { // Automatically select the first option when the selected value is empty. const autoSelectedOption = getAutoSelectedOption();