feat(auto-complete): focus & blur methods

tusen-ai · Mar 8, 2022 · 46bab31 · 46bab31
1 parent 75f5b9b
commit 46bab31
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 18 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -10,11 +10,13 @@
 
 ### Feats
 
-- `n-dynamic-tags` `input` slot handle blur, closes [#2575](https://github.com/TuSimple/naive-ui/issues/2575)
+- `n-dynamic-tags` `input` slot add `handleBlur` prop, closes [#2575](https://github.com/TuSimple/naive-ui/issues/2575)
 - `n-space` add `RTL` support.
 - `n-avatar` add `RTL` support.
 - `n-badge` add `RTL` support.
 - `n-radio` add `RTL` support.
+- `n-auto-complete` adds `focus` method.
+- `n-auto-complete` adds `blur` method.
 
 ## 2.26.1
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -10,11 +10,13 @@
 
 ### Feats
 
-- `n-dynamic-tags` 的 `input` slot 支持焦点管理，关闭 [#2575](https://github.com/TuSimple/naive-ui/issues/2575)
+- `n-dynamic-tags` 的 `input` slot 新增 `handleBlur` 属性，关闭 [#2575](https://github.com/TuSimple/naive-ui/issues/2575)
 - `n-space` 添加 `RTL` 支持
 - `n-avatar` 添加 `RTL` 支持
 - `n-badge` 添加 `RTL` 支持
 - `n-radio` 添加 `RTL` 支持
+- `n-auto-complete` 新增 `focus` 方法
+- `n-auto-complete` 新增 `blur` 方法
 
 ## 2.26.1
 

diff --git a/src/auto-complete/demos/enUS/index.demo-entry.md b/src/auto-complete/demos/enUS/index.demo-entry.md
@@ -64,3 +64,10 @@ customized-rendering.vue
 | default | `(options: { handleInput: (value: string) => void, handleFocus: function, handleBlur: function, value: string, theme: string \| null })` | Custom input elements, supplied by the user. |
 | prefix | `()` | Input's prefix content. |
 | suffix | `()` | Input's suffix content. |
+
+### Input Methods
+
+| Name  | Type         | Description              | Version      |
+| ----- | ------------ | ------------------------ | ------------ |
+| blur  | `() => void` | Blur the input element.  | NEXT_VERSION |
+| focus | `() => void` | Focus the input element. | NEXT_VERSION |
diff --git a/src/auto-complete/demos/zhCN/index.demo-entry.md b/src/auto-complete/demos/zhCN/index.demo-entry.md
@@ -64,3 +64,10 @@ customized-rendering.vue
 | default | `(options: { handleInput: (value: string) => void, handleFocus: function, handleBlur: function, value: string, theme: string \| null })` | 自定义输入元素，由用户填充 |
 | prefix | `()` | 输入框头部内容 |
 | suffix | `()` | 输入框尾部内容 |
+
+### Input Methods
+
+| 名称  | 类型         | 说明             | 版本         |
+| ----- | ------------ | ---------------- | ------------ |
+| blur  | `() => void` | Blur input 元素  | NEXT_VERSION |
+| focus | `() => void` | Focus input 元素 | NEXT_VERSION |
diff --git a/src/auto-complete/index.ts b/src/auto-complete/index.ts
@@ -2,5 +2,6 @@ export { default as NAutoComplete } from './src/AutoComplete'
 export type { AutoCompleteProps } from './src/AutoComplete'
 export type {
   AutoCompleteOption,
-  AutoCompleteGroupOption
+  AutoCompleteGroupOption,
+  AutoCompleteInst
 } from './src/interface'
diff --git a/src/auto-complete/src/AutoComplete.tsx b/src/auto-complete/src/AutoComplete.tsx
@@ -31,6 +31,7 @@ import {
 } from '../../_utils'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import { NInternalSelectMenu, InternalSelectMenuRef } from '../../_internal'
+import type { InputInst } from '../../input'
 import { NInput } from '../../input'
 import type {
   SelectBaseOption,
@@ -45,7 +46,8 @@ import type {
   OnUpdateValue,
   OnSelect,
   OnUpdateImpl,
-  AutoCompleteOption
+  AutoCompleteOption,
+  AutoCompleteInst
 } from './interface'
 import style from './styles/index.cssr'
 
@@ -278,7 +280,19 @@ export default defineComponent({
     const themeClassHandle = inlineThemeDisabled
       ? useThemeClass('auto-complete', undefined, cssVarsRef, props)
       : undefined
+    const inputInstRef = ref<InputInst | null>(null)
+    const exposedMethods: AutoCompleteInst = {
+      focus: () => {
+        inputInstRef.value?.focus()
+      },
+      blur: () => {
+        inputInstRef.value?.blur()
+      }
+    }
     return {
+      focus: exposedMethods.focus,
+      blur: exposedMethods.blur,
+      inputInstRef,
       uncontrolledValue: uncontrolledValueRef,
       mergedValue: mergedValueRef,
       isMounted: useIsMounted(),
@@ -336,6 +350,7 @@ export default defineComponent({
                     const { mergedTheme } = this
                     return (
                       <NInput
+                        ref="inputInstRef"
                         status={this.mergedStatus}
                         theme={mergedTheme.peers.Input}
                         themeOverrides={mergedTheme.peerOverrides.Input}

diff --git a/src/auto-complete/src/interface.ts b/src/auto-complete/src/interface.ts
@@ -13,3 +13,8 @@ AutoCompleteOption | AutoCompleteGroupOption | string
 export type OnUpdateValue = (value: string & (string | null)) => void
 export type OnUpdateImpl = (value: string | null) => void
 export type OnSelect = (value: string | number) => void
+
+export interface AutoCompleteInst {
+  focus: () => void
+  blur: () => void
+}
diff --git a/src/dynamic-tags/demos/enUS/index.demo-entry.md b/src/dynamic-tags/demos/enUS/index.demo-entry.md
@@ -33,7 +33,7 @@ slot.vue
 
 ### DynamicTags Slots
 
-| Name | Parameters | Description |
-| --- | --- | --- |
-| input | `(info: { submit: (value: any) => void, })` | Custom element(s) to replace the regular input. |
-| trigger | `(info: { activate: () => void, disabled: boolean })` | The element or component that triggers the tag to switch to an input. |
+| Name | Parameters | Description | Version |
+| --- | --- | --- | --- |
+| input | `(info: { submit: (value: any) => void, handleBlur: (e: FocusEvent) => void })` | Custom element(s) to replace the regular input. | `handleBlur` NEXT_VERSION |
+| trigger | `(info: { activate: () => void, disabled: boolean })` | The element or component that triggers the tag to switch to an input. |  |
diff --git a/src/dynamic-tags/demos/enUS/slot.demo.vue b/src/dynamic-tags/demos/enUS/slot.demo.vue
@@ -6,14 +6,16 @@ You can replace a dynamic-tags input or trigger element with another component.
 
 <template>
   <n-dynamic-tags v-model:value="tags">
-    <template #input="{ submit }">
+    <template #input="{ submit, handleBlur }">
       <n-auto-complete
+        ref="autoCompleteInstRef"
         v-model:value="inputValue"
         size="small"
         :options="options"
         placeholder="Email"
         :clear-after-select="true"
         @select="submit($event)"
+        @blur="handleBlur"
       />
     </template>
     <template #trigger="{ activate, disabled }">
@@ -36,14 +38,19 @@ You can replace a dynamic-tags input or trigger element with another component.
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue'
+import { defineComponent, ref, computed, watch, nextTick } from 'vue'
+import { AutoCompleteInst } from 'naive-ui'
 import Add from '@vicons/ionicons5/Add'
 
 export default defineComponent({
   components: {
     Add
   },
   setup () {
+    const autoCompleteInstRef = ref<AutoCompleteInst | null>(null)
+    watch(autoCompleteInstRef, (value) => {
+      if (value) nextTick(() => value.focus())
+    })
     const inputValueRef = ref('')
     const options = computed(() => {
       if (inputValueRef.value === null) {
@@ -67,6 +74,7 @@ export default defineComponent({
       })
     })
     return {
+      autoCompleteInstRef,
       tags: ref(['Teacher', 'Programmer']),
       inputValue: inputValueRef,
       options

diff --git a/src/dynamic-tags/demos/zhCN/index.demo-entry.md b/src/dynamic-tags/demos/zhCN/index.demo-entry.md
@@ -33,7 +33,7 @@ slot.vue
 
 ### DynamicTags Slots
 
-| 名称 | 参数 | 说明 |
-| --- | --- | --- |
-| input | `(info: { submit: (value: any) => void, })` | 自定义输入元素，由用户填充 |
-| trigger | `(info: { activate: () => void, disabled: boolean })` | 触发输入标签的组件或元素 |
+| 名称 | 参数 | 说明 | 版本 |
+| --- | --- | --- | --- |
+| input | `(info: { submit: (value: any) => void, handleBlur: (e: FocusEvent) => void })` | 自定义输入元素，由用户填充 | `handleBlur` NEXT_VERSION |
+| trigger | `(info: { activate: () => void, disabled: boolean })` | 触发输入标签的组件或元素 |  |
diff --git a/src/dynamic-tags/demos/zhCN/slot.demo.vue b/src/dynamic-tags/demos/zhCN/slot.demo.vue
@@ -6,15 +6,16 @@
 
 <template>
   <n-dynamic-tags v-model:value="tags" :max="3">
-    <template #input="{ submit, handleInputBlur }">
+    <template #input="{ submit, handleBlur }">
       <n-auto-complete
+        ref="autoCompleteInstRef"
         v-model:value="inputValue"
         size="small"
         :options="options"
         placeholder="邮箱"
         :clear-after-select="true"
         @select="submit($event)"
-        @blur="handleInputBlur"
+        @blur="handleBlur"
       />
     </template>
     <template #trigger="{ activate, disabled }">
@@ -37,14 +38,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue'
+import { defineComponent, ref, computed, watch, nextTick } from 'vue'
+import { AutoCompleteInst } from 'naive-ui'
 import Add from '@vicons/ionicons5/Add'
 
 export default defineComponent({
   components: {
     Add
   },
   setup () {
+    const autoCompleteInstRef = ref<AutoCompleteInst | null>(null)
+    watch(autoCompleteInstRef, (value) => {
+      if (value) nextTick(() => value.focus())
+    })
     const inputValueRef = ref('')
     const options = computed(() => {
       if (inputValueRef.value === null) {
@@ -68,6 +74,7 @@ export default defineComponent({
       })
     })
     return {
+      autoCompleteInstRef,
       tags: ref(['教师', '程序员']),
       inputValue: inputValueRef,
       options

diff --git a/src/dynamic-tags/src/DynamicTags.tsx b/src/dynamic-tags/src/DynamicTags.tsx
@@ -245,7 +245,7 @@ export default defineComponent({
                   $slots.input ? (
                     $slots.input({
                       submit: handleInputConfirm,
-                      handleInputBlur
+                      handleBlur: handleInputBlur
                     })
                   ) : (
                     <NInput