fix: resolve incorrect display of options in formkit selector with async data (#6629)

#### 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 延迟设置时无法正常回显的问题。
```
pull/6628/head^2
Takagi 2024-09-10 16:16:10 +08:00 committed by GitHub
parent 3c785cb7c8
commit b02ab8d809
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 8 deletions

View File

@ -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) {

View File

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