feat: n-auto-complete add auto-pending prop

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 2.41.1
+
+### Features
+
+- `n-auto-complete` add `auto-pending` to set whether to preselect the first option
+
 ## 2.41.0
 
 `2025-01-05`

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 2.41.1
+
+### Features
+
+- `n-auto-complete` 新增 `auto-pending` 来设置是否预选第一个选项
+
 ## 2.41.0
 
 `2025-01-05`

src/_internal/select-menu/src/SelectMenu.tsx

@@ -293,6 +293,9 @@ export default defineComponent({
       if (pendingTmNode) {
         setPendingTmNode(pendingTmNode.getNext({ loop: true }), true)
       }
+      else {
+        setPendingTmNode(props.treeMate.getFirstAvailableNode(), true)
+      }
     }
     function prev(): void {
       const { value: pendingTmNode } = pendingNodeRef

src/auto-complete/demos/enUS/index.demo-entry.md

@@ -14,6 +14,7 @@ show-options-by-value.vue
 customized-rendering.vue
 status.vue
 append.vue
+not-auto-pending.vue
 ```
 
 ## API
@@ -42,6 +43,7 @@ append.vue
 | status | `'success' \| 'warning' \| 'error'` | `undefined` | Validation status. | 2.27.0 |
 | to | `string \| HTMLElement \| false` | `body` | Container node of the menu. `false` will keep it not detached. |  |
 | value | `string` | `undefined` | Input of autocomplete. |  |
+| auto-pending | `boolean` | `true` | Whether to auto preselect the first option. | 2.41.1 |
 | on-blur | `(event: FocusEvent) => void` | `undefined` | On blur callback function. |  |
 | on-focus | `(event: FocusEvent) => void` | `undefined` | On focus callback function. |  |
 | on-select | `(value: string) => void` | `undefined` | On select callback function. |  |

src/auto-complete/demos/enUS/not-auto-pending.demo.vue

@@ -0,0 +1,38 @@
+<markdown>
+# Not preselect the first option
+</markdown>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const valueRef = ref('')
+    return {
+      value: valueRef,
+      options: computed(() => {
+        return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
+          const prefix = valueRef.value.split('@')[0]
+          return {
+            label: prefix + suffix,
+            value: prefix + suffix
+          }
+        })
+      })
+    }
+  }
+})
+</script>
+
+<template>
+  <n-auto-complete
+    v-model:value="value"
+    :input-props="{
+      autocomplete: 'disabled',
+    }"
+    :auto-pending="false"
+    :options="options"
+    placeholder="邮箱"
+    clearable
+  />
+</template>

src/auto-complete/demos/zhCN/index.demo-entry.md

@@ -14,6 +14,7 @@ show-options-by-value.vue
 customized-rendering.vue
 status.vue
 append.vue
+not-auto-pending.vue
 ```
 
 ## API
@@ -42,6 +43,7 @@ append.vue
 | status | `'success' \| 'warning' \| 'error'` | `undefined` | 验证状态 | 2.27.0 |
 | to | `string \| HTMLElement \| false` | `body` | 菜单的容器节点，`false` 会待在原地 |  |
 | value | `string` | `undefined` | 自动填充的数据用户可控 |  |
+| auto-pending | `boolean` | `true` | 是否预选第一个选项 | 2.41.1 |
 | on-blur | `(event: FocusEvent) => void` | `undefined` | blur 时触发的回调函数 |  |
 | on-focus | `(event: FocusEvent) => void` | `undefined` | focus 时触发的回调函数 |  |
 | on-select | `(value: string) => void` | `undefined` | select 选中时触发的回调函数 |  |

src/auto-complete/demos/zhCN/not-auto-pending.demo.vue

@@ -0,0 +1,38 @@
+<markdown>
+# 不预选第一个选项
+</markdown>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const valueRef = ref('')
+    return {
+      value: valueRef,
+      options: computed(() => {
+        return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
+          const prefix = valueRef.value.split('@')[0]
+          return {
+            label: prefix + suffix,
+            value: prefix + suffix
+          }
+        })
+      })
+    }
+  }
+})
+</script>
+
+<template>
+  <n-auto-complete
+    v-model:value="value"
+    :input-props="{
+      autocomplete: 'disabled',
+    }"
+    :auto-pending="false"
+    :options="options"
+    placeholder="邮箱"
+    clearable
+  />
+</template>

src/auto-complete/src/AutoComplete.tsx

@@ -111,6 +111,10 @@ export const autoCompleteProps = {
   onSelect: [Function, Array] as PropType<MaybeArray<OnSelect>>,
   onBlur: [Function, Array] as PropType<MaybeArray<(e: FocusEvent) => void>>,
   onFocus: [Function, Array] as PropType<MaybeArray<(e: FocusEvent) => void>>,
+  autoPending: {
+    type: Boolean,
+    default: true
+  },
   // deprecated
   onInput: [Function, Array] as PropType<MaybeArray<OnUpdateValue> | undefined>
 } as const
@@ -445,7 +449,7 @@ export default defineComponent({
                                 this.mergedTheme.peerOverrides
                                   .InternalSelectMenu
                               }
-                              auto-pending
+                              autoPending={this.autoPending}
                               class={[
                                 `${mergedClsPrefix}-auto-complete-menu`,
                                 this.themeClass,