From dd3d53486c37b8e411d7c25ec6e98367c0727b1a Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Wed, 20 Mar 2024 17:04:07 +0800
Subject: [PATCH] pref: create while searching for tags or categories (#5526)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement
/area ui
/milestone 2.14.x

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

在 `TagSelect` 与 `CategorySelect` 组件中，当搜索的同时允许进行创建新的分类或标签。

#### How to test it?

测试在搜索标签或者分类时，能否创建新的标签或者分类

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

Fixes #4660

#### Does this PR introduce a user-facing change?
```release-note
在搜索标签或分类的同时允许进行创建新的分类或标签
```
---
 .../inputs/category-select/CategorySelect.vue | 26 ++++++++++++-------
 .../formkit/inputs/tag-select/TagSelect.vue   | 22 +++++++++-------
 2 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/ui/src/formkit/inputs/category-select/CategorySelect.vue b/ui/src/formkit/inputs/category-select/CategorySelect.vue
index 37524c549..a019f57ab 100644
--- a/ui/src/formkit/inputs/category-select/CategorySelect.vue
+++ b/ui/src/formkit/inputs/category-select/CategorySelect.vue
@@ -171,19 +171,23 @@ const handleKeydown = (e: KeyboardEvent) => {
       : convertTreeToCategories(categoriesTree.value);
 
     const index = categoryIndices.findIndex(
-      (tag) => tag.metadata.name === selectedCategory.value?.metadata.name
+      (category) =>
+        category.metadata.name === selectedCategory.value?.metadata.name
     );
     if (index > 0) {
       selectedCategory.value = categoryIndices[index - 1];
+    } else {
+      selectedCategory.value = undefined;
     }
     scrollToSelected();
   }
 
   if (e.key === "Enter") {
-    if (searchResults.value.length === 0 && text.value) {
+    if (!selectedCategory.value && text.value) {
       handleCreateCategory();
       return;
     }
+
     if (selectedCategory.value) {
       handleSelect(selectedCategory.value);
       text.value = "";
@@ -193,12 +197,10 @@ const handleKeydown = (e: KeyboardEvent) => {
 };
 
 const scrollToSelected = () => {
-  if (!selectedCategory.value) {
-    return;
-  }
-  const selectedNode = document.getElementById(
-    `category-${selectedCategory.value?.metadata.name}`
-  );
+  const selectedNodeName = selectedCategory.value
+    ? selectedCategory.value?.metadata.name
+    : "create";
+  const selectedNode = document.getElementById(`category-${selectedNodeName}`);
   if (selectedNode) {
     selectedNode.scrollIntoView({
       behavior: "smooth",
@@ -291,11 +293,15 @@ const handleDelete = () => {
     <div v-if="dropdownVisible" :class="context.classes['dropdown-wrapper']">
       <ul class="p-1">
         <HasPermission
-          v-if="text.trim() && !searchResults?.length"
+          v-if="text.trim()"
           :permissions="['system:posts:manage']"
         >
           <li
-            class="group flex cursor-pointer items-center justify-between rounded bg-gray-100 p-2"
+            id="category-create"
+            class="group flex cursor-pointer items-center justify-between rounded p-2"
+            :class="{
+              'bg-gray-100': selectedCategory === undefined,
+            }"
             @click="handleCreateCategory"
           >
             <span class="text-xs text-gray-700 group-hover:text-gray-900">
diff --git a/ui/src/formkit/inputs/tag-select/TagSelect.vue b/ui/src/formkit/inputs/tag-select/TagSelect.vue
index fd62d83e3..e495cdc26 100644
--- a/ui/src/formkit/inputs/tag-select/TagSelect.vue
+++ b/ui/src/formkit/inputs/tag-select/TagSelect.vue
@@ -153,13 +153,15 @@ const handleKeydown = (e: KeyboardEvent) => {
     );
     if (index > 0) {
       selectedTag.value = searchResults.value[index - 1];
+    } else {
+      selectedTag.value = undefined;
     }
 
     scrollToSelected();
   }
 
   if (e.key === "Enter") {
-    if (searchResults.value.length === 0 && text.value) {
+    if (!selectedTag.value && text.value) {
       handleCreateTag();
       return;
     }
@@ -174,13 +176,11 @@ const handleKeydown = (e: KeyboardEvent) => {
 };
 
 const scrollToSelected = () => {
-  if (!selectedTag.value) {
-    return;
-  }
+  const selectedNodeName = selectedTag.value
+    ? selectedTag.value?.metadata.name
+    : "tag-create";
 
-  const selectedNode = document.getElementById(
-    selectedTag.value?.metadata.name
-  );
+  const selectedNode = document.getElementById(selectedNodeName);
 
   if (selectedNode) {
     selectedNode.scrollIntoView({
@@ -281,11 +281,15 @@ const handleDelete = () => {
     <div v-if="dropdownVisible" :class="context.classes['dropdown-wrapper']">
       <ul class="p-1">
         <HasPermission
-          v-if="text.trim() && !searchResults?.length"
+          v-if="text.trim()"
           :permissions="['system:posts:manage']"
         >
           <li
-            class="group flex cursor-pointer items-center justify-between rounded bg-gray-100 p-2"
+            id="tag-create"
+            class="group flex cursor-pointer items-center justify-between rounded p-2"
+            :class="{
+              'bg-gray-100': selectedTag === undefined,
+            }"
             @click="handleCreateTag"
           >
             <span class="text-xs text-gray-700 group-hover:text-gray-900">