feat(TextArea): add enterkeyhint and onEnterPress

src/components/input/input.tsx

@@ -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<

src/components/text-area/tests/text-area.test.tsx

@@ -33,7 +33,7 @@
     const maxRows = 5
     const { getByRole } = render(<TextArea autoSize={{ minRows, maxRows }} />)
     const textarea = getByRole('textbox')
     const hiddenTextarea = document.querySelector(
       `.${classPrefix}-element-hidden`
     )!
     // mock
@@ -123,7 +123,7 @@
 
   test('set rows should be work', () => {
     const { getByRole } = render(<TextArea rows={1} autoSize />)
     const hiddenTextarea = document.querySelector(
       `.${classPrefix}-element-hidden`
     )!
     const textarea = getByRole('textbox')
@@ -142,4 +142,27 @@
     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 })
+  })
 })

src/components/text-area/text-area.tsx

@@ -24,6 +24,7 @@ export type TextAreaProps = Pick<
   | 'onCompositionStart'
   | 'onCompositionEnd'
   | 'onClick'
+  | 'onKeyDown'
 > & {
   onChange?: (val: string) => void
   value?: string
@@ -39,6 +40,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'
@@ -119,6 +129,24 @@ export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
       textArea.style.height = `${height}px`
     }, [value, autoSize])
 
+    const handleKeydown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (props.onEnterPress && (e.code === 'Enter' || e.keyCode === 13)) {
+        props.onEnterPress(e)
+      }
+      props.onKeyDown?.(e)
+    }
+
+    useIsomorphicLayoutEffect(() => {
+      if (!props.enterKeyHint) return
+      nativeTextAreaRef.current?.setAttribute(
+        'enterkeyhint',
+        props.enterKeyHint
+      )
+      return () => {
+        nativeTextAreaRef.current?.removeAttribute('enterkeyhint')
+      }
+    }, [props.enterKeyHint])
+
     const compositingRef = useRef(false)
 
     let count
@@ -182,6 +210,7 @@ export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
           onFocus={props.onFocus}
           onBlur={props.onBlur}
           onClick={props.onClick}
+          onKeyDown={handleKeydown}
         />
         {count}