From b02ab8d8099cdebb2e2b7a51f676a96ad04ea02c Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Tue, 10 Sep 2024 16:16:10 +0800
Subject: [PATCH] fix: resolve incorrect display of options in formkit selector
 with async data (#6629)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind bug
/area ui
/milestone 2.20.x

#### What this PR does / why we need it:

为 formkit select 组件优化逻辑，目前将可以监听到 options 的变化，用于在变化时设置值。用于解决当 options 是异步获取，而 value 是初始设置时，无法显示正常的 label。

#### How to test it?

测试 options 比设置 value 晚时，数据能否正常显示 label。

#### Does this PR introduce a user-facing change?
```release-note
解决当 formkit select 组件中的 options 延迟设置时无法正常回显的问题。
```
---
 .../inputs/select/SelectDropdownContainer.vue   |  9 ++++++---
 ui/src/formkit/inputs/select/SelectMain.vue     | 17 ++++++++++++-----
 2 files changed, 18 insertions(+), 8 deletions(-)

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();