pref: create while searching for tags or categories (#5526)

#### 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
在搜索标签或分类的同时允许进行创建新的分类或标签
```

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">

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">