feat(mention): add focus and blur methods (#973)

* feat(mention): add focus and blur methods

* test(mention): focus and blur methods

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-mention` add `focus` and `blur` methods.
+
 ## 2.16.6 (2021-08-26)
 
 ### Feats

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-mention` 新增 `focus`、`blur` 方法
+
 ## 2.16.6 (2021-08-26)
 
 ### Feats

src/mention/demos/enUS/index.demo-entry.md

@@ -12,6 +12,7 @@ autosize
 form
 render-label
 custom-prefix
+manual-trigger
 ```
 
 ## Props
@@ -50,6 +51,13 @@ Mention is provided after `v2.2.0`.
 | style | `string` | Option style. |
 | value | `string` | Should be unique. |
 
+### Mention Methods
+
+| Name  | Type         | Description                   |
+| ----- | ------------ | ----------------------------- |
+| focus | `() => void` | Manually focus the component. |
+| blur  | `() => void` | Manually blur the component.  |
+
 ### Mention Slots
 
 | Name  | Parameters | Description                 |

src/mention/demos/enUS/manual-trigger.demo.md

@@ -0,0 +1,62 @@
+# Manual trigger
+
+Maybe you want to trigger the `focus` and `blur` events manually.
+
+```html
+<n-space>
+  <n-mention :options="options" default-value="@" ref="myMention" />
+  <n-button @click="triggerFocus"
+    >Click to focus, and will blur after one second</n-button
+  >
+</n-space>
+```
+
+```js
+import { defineComponent, h, ref } from 'vue'
+import { NIcon } from 'naive-ui'
+import { HomeOutline as HomeIcon } from '@vicons/ionicons5'
+
+export default defineComponent({
+  setup () {
+    const myMentionRef = ref(null)
+    const triggerFocus = () => {
+      myMentionRef.value.focus()
+      setTimeout(triggerBlur, 1000)
+    }
+    const triggerBlur = () => {
+      myMentionRef.value.blur()
+    }
+    return {
+      myMention: myMentionRef,
+      triggerFocus,
+      triggerBlur,
+      options: [
+        {
+          label: '07akioni',
+          value: '07akioni'
+        },
+        {
+          label: 'star-kirby',
+          value: 'star-kirby'
+        },
+        {
+          label: 'Guandong-Road',
+          value: 'Guandong-Road'
+        },
+        {
+          label: (option) =>
+            h('span', { style: 'display: flex; align-items: center;' }, [
+              h(
+                NIcon,
+                { style: 'margin-right: 5px' },
+                { default: () => h(HomeIcon) }
+              ),
+              option.value
+            ]),
+          value: 'No.5-Yiheyuan-Road'
+        }
+      ]
+    }
+  }
+})
+```

src/mention/demos/zhCN/index.demo-entry.md

@@ -12,6 +12,7 @@ autosize
 form
 render-label
 custom-prefix
+manual-trigger
 ```
 
 ## Props
@@ -50,6 +51,13 @@ Mention 在 `v2.2.0` 及以后可用。
 | style | `string` | 选项的样式 |
 | value | `string` | 在选项中应该是唯一的 |
 
+### Mention Methods
+
+| Name  | Type         | Description                   |
+| ----- | ------------ | ----------------------------- |
+| focus | `() => void` | Manually focus the component. |
+| blur  | `() => void` | Manually blur the component.  |
+
 ### Mention Slots
 
 | 名称  | 参数 | 说明                |

src/mention/demos/zhCN/manual-trigger.demo.md

@@ -0,0 +1,60 @@
+# 手动触发
+
+可能你想要手动触发 `focus` 和 `blur` 事件。
+
+```html
+<n-space>
+  <n-mention :options="options" default-value="@" ref="myMention" />
+  <n-button @click="triggerFocus">点击聚焦，一秒后失去焦点</n-button>
+</n-space>
+```
+
+```js
+import { defineComponent, h, ref } from 'vue'
+import { NIcon } from 'naive-ui'
+import { HomeOutline as HomeIcon } from '@vicons/ionicons5'
+
+export default defineComponent({
+  setup () {
+    const myMentionRef = ref(null)
+    const triggerFocus = () => {
+      myMentionRef.value.focus()
+      setTimeout(triggerBlur, 1000)
+    }
+    const triggerBlur = () => {
+      myMentionRef.value.blur()
+    }
+    return {
+      myMention: myMentionRef,
+      triggerFocus,
+      triggerBlur,
+      options: [
+        {
+          label: '07akioni',
+          value: '07akioni'
+        },
+        {
+          label: 'star-kirby',
+          value: 'star-kirby'
+        },
+        {
+          label: '广东路',
+          value: '广东路'
+        },
+        {
+          label: (option) =>
+            h('div', { style: 'display: flex; align-items: center;' }, [
+              h(
+                NIcon,
+                { style: 'margin-right: 5px' },
+                { default: () => h(HomeIcon) }
+              ),
+              option.value
+            ]),
+          value: '颐和园路5号'
+        }
+      ]
+    }
+  }
+})
+```

src/mention/src/Mention.tsx

@@ -293,6 +293,12 @@ export default defineComponent({
       nTriggerFormFocus()
       syncAfterCursorMove()
     }
+    function focus (): void {
+      inputInstRef.value?.focus()
+    }
+    function blur (): void {
+      inputInstRef.value?.blur()
+    }
     function handleInputBlur (e: FocusEvent): void {
       const { onBlur } = props
       onBlur?.(e)
@@ -364,6 +370,8 @@ export default defineComponent({
       handleInputKeyDown,
       handleSelect,
       handleInputMouseDown,
+      focus,
+      blur,
       cssVars: computed(() => {
         const {
           self: { menuBoxShadow }

src/mention/tests/Mention.spec.ts

@@ -189,4 +189,23 @@ describe('n-mention', () => {
     await wrapper.find('input').element.blur()
     expect(onBlur).toHaveBeenCalled()
   })
+
+  it('should work with `focus` method', async () => {
+    const wrapper = mount(NMention, {
+      attachTo: document.body,
+      props: { options: options }
+    })
+    await wrapper.vm.focus()
+    expect(wrapper.find('.n-input').classes()).toContain('n-input--focus')
+  })
+
+  it('should work with `blur` method', async () => {
+    const wrapper = mount(NMention, {
+      attachTo: document.body,
+      props: { options: options }
+    })
+    await wrapper.vm.focus()
+    await wrapper.vm.blur()
+    expect(wrapper.find('.n-input').classes()).not.toContain('n-input--focus')
+  })
 })