From 4e555a003c97f74c0c36c39b3a9bd597b57bdb93 Mon Sep 17 00:00:00 2001 From: Danny Feliz Date: Wed, 30 Jun 2021 23:14:51 -0400 Subject: [PATCH] feat: adds support for the enter key on the numeric keypad (#341) --- src/auto-complete/src/AutoComplete.tsx | 1 + src/button/src/Button.tsx | 2 ++ src/carousel/src/Carousel.tsx | 1 + src/cascader/src/Cascader.tsx | 1 + src/checkbox/src/Checkbox.tsx | 1 + src/dynamic-tags/src/DynamicTags.tsx | 1 + src/input-number/src/InputNumber.tsx | 2 +- src/input/src/Input.tsx | 1 + src/mention/src/Mention.tsx | 3 ++- src/pagination/src/Pagination.tsx | 2 +- src/radio/src/use-radio.ts | 6 +++--- src/select/src/Select.tsx | 1 + src/tree-select/src/TreeSelect.tsx | 2 +- src/tree/src/keyboard.tsx | 2 +- 14 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/auto-complete/src/AutoComplete.tsx b/src/auto-complete/src/AutoComplete.tsx index 0c25b6c52..440c1a7a5 100644 --- a/src/auto-complete/src/AutoComplete.tsx +++ b/src/auto-complete/src/AutoComplete.tsx @@ -175,6 +175,7 @@ export default defineComponent({ function handleKeyDown (e: KeyboardEvent): void { switch (e.code) { case 'Enter': + case 'NumpadEnter': if (!isComposingRef.value) { const pendingOptionData = menuInstRef.value?.getPendingOption() if (pendingOptionData) { diff --git a/src/button/src/Button.tsx b/src/button/src/Button.tsx index 0e107dcfb..415d070ea 100644 --- a/src/button/src/Button.tsx +++ b/src/button/src/Button.tsx @@ -135,6 +135,7 @@ const Button = defineComponent({ const handleKeyUp = (e: KeyboardEvent): void => { switch (e.code) { case 'Enter': + case 'NumpadEnter': if (!props.keyboard) { e.preventDefault() return @@ -150,6 +151,7 @@ const Button = defineComponent({ const handleKeyDown = (e: KeyboardEvent): void => { switch (e.code) { case 'Enter': + case 'NumpadEnter': if (!props.keyboard) return e.preventDefault() enterPressedRef.value = true diff --git a/src/carousel/src/Carousel.tsx b/src/carousel/src/Carousel.tsx index 7b5d5330e..f9879d6e3 100644 --- a/src/carousel/src/Carousel.tsx +++ b/src/carousel/src/Carousel.tsx @@ -108,6 +108,7 @@ export default defineComponent({ function handleKeydown (e: KeyboardEvent, current: number): void { switch (e.code) { case 'Enter': + case 'NumpadEnter': case 'Space': setCurrent(current) } diff --git a/src/cascader/src/Cascader.tsx b/src/cascader/src/Cascader.tsx index 3bd84efe4..28f049458 100644 --- a/src/cascader/src/Cascader.tsx +++ b/src/cascader/src/Cascader.tsx @@ -491,6 +491,7 @@ export default defineComponent({ if (props.filterable) return // eslint-disable-next-line no-fallthrough case 'Enter': + case 'NumpadEnter': if (!mergedShowRef.value) { openMenu() } else { diff --git a/src/checkbox/src/Checkbox.tsx b/src/checkbox/src/Checkbox.tsx index f9c5905bb..6cd625394 100644 --- a/src/checkbox/src/Checkbox.tsx +++ b/src/checkbox/src/Checkbox.tsx @@ -151,6 +151,7 @@ export default defineComponent({ switch (e.code) { case 'Space': case 'Enter': + case 'NumpadEnter': toggle() } } diff --git a/src/dynamic-tags/src/DynamicTags.tsx b/src/dynamic-tags/src/DynamicTags.tsx index 97b290258..0988392df 100644 --- a/src/dynamic-tags/src/DynamicTags.tsx +++ b/src/dynamic-tags/src/DynamicTags.tsx @@ -115,6 +115,7 @@ export default defineComponent({ function handleInputKeyUp (e: KeyboardEvent): void { switch (e.code) { case 'Enter': + case 'NumpadEnter': handleInputConfirm() } } diff --git a/src/input-number/src/InputNumber.tsx b/src/input-number/src/InputNumber.tsx index 77fc2d427..f7ea52dc8 100644 --- a/src/input-number/src/InputNumber.tsx +++ b/src/input-number/src/InputNumber.tsx @@ -276,7 +276,7 @@ export default defineComponent({ const handleAddClick = doAdd const handleMinusClick = doMinus function handleKeyDown (e: KeyboardEvent): void { - if (e.code === 'Enter') { + if (e.code === 'Enter' || e.code === 'NumpadEnter') { if (e.target === inputInstRef.value?.wrapperElRef) { // hit input wrapper // which means not activated diff --git a/src/input/src/Input.tsx b/src/input/src/Input.tsx index 2e238d2e7..b4b372481 100644 --- a/src/input/src/Input.tsx +++ b/src/input/src/Input.tsx @@ -522,6 +522,7 @@ export default defineComponent({ handleWrapperKeyDownEsc() break case 'Enter': + case 'NumpadEnter': handleWrapperKeyDownEnter(e) break } diff --git a/src/mention/src/Mention.tsx b/src/mention/src/Mention.tsx index 5e166afca..3fbfad796 100644 --- a/src/mention/src/Mention.tsx +++ b/src/mention/src/Mention.tsx @@ -255,7 +255,8 @@ export default defineComponent({ } else if ( e.code === 'ArrowUp' || e.code === 'ArrowDown' || - e.code === 'Enter' + e.code === 'Enter' || + e.code === 'NumpadEnter' ) { if (inputInstRef.value?.isCompositing) return const { value: selectMenuInst } = selectMenuInstRef diff --git a/src/pagination/src/Pagination.tsx b/src/pagination/src/Pagination.tsx index 0c4dacbbb..a5629f435 100644 --- a/src/pagination/src/Pagination.tsx +++ b/src/pagination/src/Pagination.tsx @@ -228,7 +228,7 @@ export default defineComponent({ doUpdatePageSize(value) } function handleQuickJumperKeyUp (e: KeyboardEvent): void { - if (e.code === 'Enter') { + if (e.code === 'Enter' || e.code === 'NumpadEnter') { const page = parseInt(jumperValueRef.value) if ( !Number.isNaN(page) && diff --git a/src/radio/src/use-radio.ts b/src/radio/src/use-radio.ts index 3f142a1ae..b1bff9990 100644 --- a/src/radio/src/use-radio.ts +++ b/src/radio/src/use-radio.ts @@ -58,9 +58,8 @@ export interface RadioGroupInjection { doUpdateValue: (value: string | number) => void } -export const radioGroupInjectionKey: InjectionKey = Symbol( - 'radioGroup' -) +export const radioGroupInjectionKey: InjectionKey = + Symbol('radioGroup') export interface UseRadio { mergedClsPrefix: Ref @@ -153,6 +152,7 @@ function setup (props: ExtractPropTypes): UseRadio { function handleKeyUp (e: KeyboardEvent): void { switch (e.code) { case 'Enter': + case 'NumpadEnter': inputRef.value?.click() } } diff --git a/src/select/src/Select.tsx b/src/select/src/Select.tsx index a08d1500a..92b127751 100644 --- a/src/select/src/Select.tsx +++ b/src/select/src/Select.tsx @@ -550,6 +550,7 @@ export default defineComponent({ if (props.filterable) break // eslint-disable-next-line no-fallthrough case 'Enter': + case 'NumpadEnter': if (mergedShowRef.value) { const menu = menuRef.value const pendingOptionData = menu?.getPendingOption() diff --git a/src/tree-select/src/TreeSelect.tsx b/src/tree-select/src/TreeSelect.tsx index 0c6fb92a2..5bd87e93d 100644 --- a/src/tree-select/src/TreeSelect.tsx +++ b/src/tree-select/src/TreeSelect.tsx @@ -437,7 +437,7 @@ export default defineComponent({ } } function handleKeyup (e: KeyboardEvent): void { - if (e.code === 'Enter') { + if (e.code === 'Enter' || e.code === 'NumpadEnter') { if (mergedShowRef.value) { treeHandleKeyup(e) if (!props.multiple) { diff --git a/src/tree/src/keyboard.tsx b/src/tree/src/keyboard.tsx index 75666c453..d11c1b6df 100644 --- a/src/tree/src/keyboard.tsx +++ b/src/tree/src/keyboard.tsx @@ -53,7 +53,7 @@ export function useKeyboard ({ const { value: fNodes } = fNodesRef let fIndex = fNodes.findIndex((tmNode) => tmNode.key === pendingNodeKey) if (!~fIndex) return - if (e.code === 'Enter') { + if (e.code === 'Enter' || e.code === 'NumpadEnter') { handleSelect(fNodes[fIndex]) } else if (e.code === 'ArrowDown') { fIndex += 1