feat(TextArea): add enterkeyhint and onEnterPress (ant-design#6598)

* feat(TextArea): add `enterkeyhint` and `onEnterPress` * chore: test case for `teatarea` * feat: `useInputHandleKeyDown` hook * fix: export `useInputHandleKeyDown` in `Input` * chore: move `useInputHandleKeyDown` * chore: adjust code --------- Co-authored-by: 二货机器人 <[email protected]>
guoyunhe · Apr 16, 2024 · 8bd3d17 · 8bd3d17
1 parent 5730b89
commit 8bd3d17
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 24 deletions.
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
@@ -4,10 +4,10 @@ import { CloseCircleFill } from 'antd-mobile-icons'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
 import classNames from 'classnames'
-import { useIsomorphicLayoutEffect } from 'ahooks'
 import { bound } from '../../utils/bound'
 import { isIOS } from '../../utils/validate'
 import { useConfig } from '../config-provider'
+import useInputHandleKeyDown from './useInputHandleKeyDown'
 
 const classPrefix = `adm-input`
 
@@ -45,6 +45,7 @@ export type InputProps = Pick<
   | 'placeholder'
   | 'readOnly'
   | 'disabled'
+  | 'enterKeyHint'
 > & {
   value?: string
   defaultValue?: string
@@ -53,14 +54,6 @@ export type InputProps = Pick<
   onlyShowClearWhenFocus?: boolean
   onClear?: () => void
   onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void
-  enterKeyHint?:
-    | 'enter'
-    | 'done'
-    | 'go'
-    | 'next'
-    | 'previous'
-    | 'search'
-    | 'send'
   min?: number
   max?: number
 } & NativeProps<
@@ -87,6 +80,12 @@ export const Input = forwardRef<InputRef, InputProps>((p, ref) => {
   const compositionStartRef = useRef(false)
   const nativeInputRef = useRef<HTMLInputElement>(null)
   const { locale } = useConfig()
+  const handleKeydown = useInputHandleKeyDown({
+    onEnterPress: props.onEnterPress,
+    onKeyDown: props.onKeyDown,
+    nativeInputRef,
+    enterKeyHint: props.enterKeyHint,
+  })
 
   useImperativeHandle(ref, () => ({
     clear: () => {
@@ -103,21 +102,6 @@ export const Input = forwardRef<InputRef, InputProps>((p, ref) => {
     },
   }))
 
-  const handleKeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (props.onEnterPress && (e.code === 'Enter' || e.keyCode === 13)) {
-      props.onEnterPress(e)
-    }
-    props.onKeyDown?.(e)
-  }
-
-  useIsomorphicLayoutEffect(() => {
-    if (!props.enterKeyHint) return
-    nativeInputRef.current?.setAttribute('enterkeyhint', props.enterKeyHint)
-    return () => {
-      nativeInputRef.current?.removeAttribute('enterkeyhint')
-    }
-  }, [props.enterKeyHint])
-
   function checkValue() {
     let nextValue = value
     if (props.type === 'number') {

diff --git a/src/components/input/useInputHandleKeyDown.ts b/src/components/input/useInputHandleKeyDown.ts
@@ -0,0 +1,37 @@
+import { useIsomorphicLayoutEffect } from 'ahooks'
+
+interface InputHandleKeyDownType<T> {
+  onEnterPress?: (e: React.KeyboardEvent<T>) => void
+  onKeyDown?: (e: React.KeyboardEvent<T>) => void
+  enterKeyHint?: React.InputHTMLAttributes<HTMLInputElement>['enterKeyHint']
+  nativeInputRef: React.RefObject<T>
+}
+
+export default function useInputHandleKeyDown<
+  T extends HTMLInputElement | HTMLTextAreaElement,
+>({
+  onEnterPress,
+  onKeyDown,
+  nativeInputRef,
+  enterKeyHint,
+}: InputHandleKeyDownType<T>) {
+  const handleKeydown = (e: React.KeyboardEvent<T>) => {
+    if (onEnterPress && (e.code === 'Enter' || e.keyCode === 13)) {
+      onEnterPress(e)
+    }
+    onKeyDown?.(e)
+  }
+
+  useIsomorphicLayoutEffect(() => {
+    const ele = nativeInputRef.current
+
+    if (!enterKeyHint || !ele) return
+
+    ele.setAttribute('enterkeyhint', enterKeyHint)
+    return () => {
+      ele.removeAttribute('enterkeyhint')
+    }
+  }, [enterKeyHint])
+
+  return handleKeydown
+}
diff --git a/src/components/text-area/tests/text-area.test.tsx b/src/components/text-area/tests/text-area.test.tsx
@@ -142,4 +142,27 @@ describe('TextArea', () => {
     const textarea = getByRole('textbox')
     expect(textarea).toHaveAttribute('rows', '1')
   })
+
+  test('should works with `onEnterPress`', async () => {
+    const onEnterPress = jest.fn()
+    const { getByRole } = render(
+      <TextArea defaultValue={'testValue'} onEnterPress={onEnterPress} />
+    )
+    const textarea = getByRole('textbox') as HTMLTextAreaElement
+    expect(textarea).toBeInTheDocument()
+    act(() => {
+      textarea.focus()
+    })
+    fireEvent.keyDown(textarea, { code: 'Enter' })
+    expect(onEnterPress).toBeCalledTimes(1)
+    fireEvent.keyUp(textarea, { code: 'Enter' })
+
+    fireEvent.keyDown(textarea, { keyCode: 13 })
+    expect(onEnterPress).toBeCalledTimes(2)
+    fireEvent.keyUp(textarea, { keyCode: 13 })
+
+    fireEvent.keyDown(textarea, { keyCode: 14 })
+    expect(onEnterPress).toBeCalledTimes(2)
+    fireEvent.keyUp(textarea, { keyCode: 14 })
+  })
 })
diff --git a/src/components/text-area/text-area.tsx b/src/components/text-area/text-area.tsx
@@ -6,6 +6,7 @@ import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { usePropsValue } from '../../utils/use-props-value'
 import { mergeProps } from '../../utils/with-default-props'
 import { devError } from '../../utils/dev-log'
+import useInputHandleKeyDown from '../../components/input/useInputHandleKeyDown'
 
 const classPrefix = 'adm-text-area'
 
@@ -24,6 +25,7 @@ export type TextAreaProps = Pick<
   | 'onCompositionStart'
   | 'onCompositionEnd'
   | 'onClick'
+  | 'onKeyDown'
 > & {
   onChange?: (val: string) => void
   value?: string
@@ -39,6 +41,15 @@ export type TextAreaProps = Pick<
         maxRows?: number
       }
   id?: string
+  onEnterPress?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
+  enterKeyHint?:
+    | 'enter'
+    | 'done'
+    | 'go'
+    | 'next'
+    | 'previous'
+    | 'search'
+    | 'send'
 } & NativeProps<
     | '--font-size'
     | '--color'
@@ -82,6 +93,13 @@ export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
     // https://github.com/ant-design/ant-design-mobile/issues/6051
     const hiddenTextAreaRef = useRef<HTMLTextAreaElement>(null)
 
+    const handleKeydown = useInputHandleKeyDown({
+      onEnterPress: props.onEnterPress,
+      onKeyDown: props.onKeyDown,
+      nativeInputRef: nativeTextAreaRef,
+      enterKeyHint: props.enterKeyHint,
+    })
+
     useImperativeHandle(ref, () => ({
       clear: () => {
         setValue('')
@@ -182,6 +200,7 @@ export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
           onFocus={props.onFocus}
           onBlur={props.onBlur}
           onClick={props.onClick}
+          onKeyDown={handleKeydown}
         />
         {count}