From 6cdd2a7588609c02bbfff37b75f6ad7871ab1e0c Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Fri, 6 Sep 2024 17:25:52 +0800
Subject: [PATCH] fix: resolve issue with disabled property in options not
 working (#6595)
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

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

解决 formkit select 组件中，option 使用 `attrs: { disabled: true }` 无效的问题。

#### How to test it?

测试在 formkit select 组件中，option 设置 disabled 属性是否有效。

#### Which issue(s) this PR fixes:

Fixed #6592

#### Does this PR introduce a user-facing change?
```release-note
解决 formkit select 组件的 Option 设置 disabled 无效的问题
```
---
 ui/src/formkit/inputs/select/SelectMain.vue   |  5 +----
 ui/src/formkit/inputs/select/SelectOption.vue | 15 ++++++++++-----
 ui/src/formkit/inputs/select/isFalse.ts       |  3 +++
 3 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 ui/src/formkit/inputs/select/isFalse.ts

diff --git a/ui/src/formkit/inputs/select/SelectMain.vue b/ui/src/formkit/inputs/select/SelectMain.vue
index d50606ca2..71ee100bd 100644
--- a/ui/src/formkit/inputs/select/SelectMain.vue
+++ b/ui/src/formkit/inputs/select/SelectMain.vue
@@ -14,6 +14,7 @@ import {
   watch,
   type PropType,
 } from "vue";
+import { isFalse } from "./isFalse";
 import SelectContainer from "./SelectContainer.vue";
 
 export interface SelectProps {
@@ -238,10 +239,6 @@ const initSelectProps = () => {
   }
 };
 
-const isFalse = (value: string | boolean | undefined | null) => {
-  return [undefined, null, "false", false].includes(value);
-};
-
 const isLoading = ref(false);
 const isFetchingMore = ref(false);
 const page = ref(1);
diff --git a/ui/src/formkit/inputs/select/SelectOption.vue b/ui/src/formkit/inputs/select/SelectOption.vue
index d09a2d989..41d248193 100644
--- a/ui/src/formkit/inputs/select/SelectOption.vue
+++ b/ui/src/formkit/inputs/select/SelectOption.vue
@@ -4,6 +4,7 @@ import { vScroll } from "@vueuse/components";
 import { useEventListener, type UseScrollReturn } from "@vueuse/core";
 import { computed, ref, watch } from "vue";
 import SelectOptionItem from "./SelectOptionItem.vue";
+import { isFalse } from "./isFalse";
 
 const props = defineProps<{
   options: Array<Record<string, unknown> & { label: string; value: string }>;
@@ -81,7 +82,7 @@ const handleSelected = (index: number) => {
     }
   }
   selectedIndex.value = index;
-  if (option) {
+  if (option && !isDisabled(option)) {
     emit("selected", option);
   }
 };
@@ -112,11 +113,15 @@ const reachMaximumLimit = computed(() => {
   return false;
 });
 
-const isDisabled = (option: { label: string; value: string }) => {
+const isDisabled = (
+  option: Record<string, unknown> & { label: string; value: string }
+) => {
+  const attrs = option.attrs as Record<string, unknown>;
   return (
-    reachMaximumLimit.value &&
-    selectedValues.value &&
-    !selectedValues.value.includes(option.value)
+    (reachMaximumLimit.value &&
+      selectedValues.value &&
+      !selectedValues.value.includes(option.value)) ||
+    !isFalse(attrs?.disabled as string | boolean | undefined)
   );
 };
 
diff --git a/ui/src/formkit/inputs/select/isFalse.ts b/ui/src/formkit/inputs/select/isFalse.ts
new file mode 100644
index 000000000..918ab0811
--- /dev/null
+++ b/ui/src/formkit/inputs/select/isFalse.ts
@@ -0,0 +1,3 @@
+export const isFalse = (value: string | boolean | undefined | null) => {
+  return [undefined, null, "false", false].includes(value);
+};