feat(select): add show-on-focus prop, closes #4191

tusen-ai · Dec 18, 2022 · e104d02 · e104d02
1 parent bcf0c23
commit e104d02
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 2 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -7,6 +7,7 @@
 - `n-badge` adds `offset` prop, closes [#4149](https://github.com/tusen-ai/naive-ui/issues/4149).
 - `n-card` adds `tag` prop
 - `n-pagination` adds `select-props` prop, closes [#4199](https://github.com/tusen-ai/naive-ui/issues/4199).
+- `n-select` adds `show-on-focus` prop, closes [#4191](https://github.com/tusen-ai/naive-ui/issues/4191).
 
 ### Fixes
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -6,7 +6,8 @@
 
 - `n-badge` 新增 `offset` 属性，关闭 [#4149](https://github.com/tusen-ai/naive-ui/issues/4149)
 - `n-card` 新增 `tag` 属性
-- `n-pagination` 新增 `select-props` 属性，关闭[#4199](https://github.com/tusen-ai/naive-ui/issues/4199)
+- `n-pagination` 新增 `select-props` 属性，关闭 [#4199](https://github.com/tusen-ai/naive-ui/issues/4199)
+- `n-select` 新增 `show-on-focus` 属性，关闭 [#4191](https://github.com/tusen-ai/naive-ui/issues/4191)
 
 ### Fixes
 

diff --git a/src/select/demos/enUS/index.demo-entry.md b/src/select/demos/enUS/index.demo-entry.md
@@ -65,6 +65,7 @@ custom-field.vue
 | show | `boolean` | `undefined` | Whether to show/open the option menu. |  |
 | show-arrow | `boolean` | `true` | Whether to show the dropdown arrow. |  |
 | show-checkmark | `boolean` | `true` | Whether to show checkmark in multiple select mode. | 2.33.4 |
+| show-on-focus | `boolean` | `false` | Whether to show menu on focus. | NEXT_VERSION |
 | size | `'tiny' \| 'small' \| 'medium' \| 'large'` | `'medium'` | Size of the select input. |  |
 | status | `'success' \| 'warning' \| 'error'` | `undefined` | Validation status. | 2.27.0 |
 | tag | `boolean` | `false` | Whether users can create new options. This should be used with `filterable`. |  |

diff --git a/src/select/demos/zhCN/index.demo-entry.md b/src/select/demos/zhCN/index.demo-entry.md
@@ -75,6 +75,7 @@ create-debug.vue
 | show | `boolean` | `undefined` | 是否展示菜单 |  |
 | show-arrow | `boolean` | `true` | 是否展示箭头 |  |
 | show-checkmark | `boolean` | `true` | 多选情况下是否展示对勾 | 2.33.4 |
+| show-on-focus | `boolean` | `false` | 聚焦时是否展示菜单 | NEXT_VERSION |
 | size | `'tiny' \| 'small' \| 'medium' \| 'large'` | `'medium'` | 组件尺寸 |  |
 | status | `'success' \| 'warning' \| 'error'` | `undefined` | 验证状态 | 2.27.0 |
 | tag | `boolean` | `false` | 是否可以创建新的选项，需要和 `filterable` 一起使用 |  |

diff --git a/src/select/src/Select.tsx b/src/select/src/Select.tsx
@@ -164,6 +164,7 @@ export const selectProps = {
   inputProps: Object as PropType<InputHTMLAttributes>,
   nodeProps: Function as PropType<NodeProps>,
   ignoreComposition: { type: Boolean, default: true },
+  showOnFocus: Boolean,
   // for jsx
   onUpdateValue: [Function, Array] as PropType<
   MaybeArray<OnUpdateValue> | undefined
@@ -420,9 +421,12 @@ export default defineComponent({
       if (onClear) call(onClear)
     }
     function doFocus (e: FocusEvent): void {
-      const { onFocus } = props
+      const { onFocus, showOnFocus } = props
       const { nTriggerFormFocus } = formItem
       if (onFocus) call(onFocus, e)
+      if (showOnFocus) {
+        openMenu()
+      }
       nTriggerFormFocus()
     }
     function doSearch (value: string): void {