fix: simplify input props handling and improve accessibility features (#1150) (#1151)

* fix: simplify input props handling and improve accessibility features

* chore: add unit test

(cherry picked from commit e6a3ca7)

# Conflicts:
#	src/Selector/Input.tsx

Author: Wxh16144

src/Selector/Input.tsx

@@ -2,7 +2,9 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { composeRef } from '@rc-component/util/lib/ref';
 import { warning } from '@rc-component/util/lib/warning';
+import composeProps from '@rc-component/util/lib/composeProps';
 import useBaseProps from '../hooks/useBaseProps';
+
 type InputRef = HTMLInputElement | HTMLTextAreaElement;
 
 interface InputProps {
@@ -39,23 +41,13 @@ const Input: React.ForwardRefRenderFunction<InputRef, InputProps> = (props, ref)
     prefixCls,
     id,
     inputElement,
-    disabled,
-    tabIndex,
-    autoFocus,
     autoComplete,
     editable,
     activeDescendantId,
     value,
-    maxLength,
-    onKeyDown,
-    onMouseDown,
-    onChange,
-    onPaste,
-    onCompositionStart,
-    onCompositionEnd,
-    onBlur,
     open,
     attrs,
+    ...restProps
   } = props;
 
   const { classNames: contextClassNames, styles: contextStyles } = useBaseProps() || {};
@@ -64,35 +56,23 @@ const Input: React.ForwardRefRenderFunction<InputRef, InputProps> = (props, ref)
 
   const { ref: originRef, props: originProps } = inputNode;
 
-  const {
-    onKeyDown: onOriginKeyDown,
-    onChange: onOriginChange,
-    onMouseDown: onOriginMouseDown,
-    onCompositionStart: onOriginCompositionStart,
-    onCompositionEnd: onOriginCompositionEnd,
-    onBlur: onOriginBlur,
-    style,
-  } = originProps;
-
   warning(
     !('maxLength' in inputNode.props),
     `Passing 'maxLength' to input element directly may not work because input in BaseSelect is controlled.`,
   );
 
   inputNode = React.cloneElement(inputNode, {
     type: 'search',
-    ...originProps,
+    ...composeProps(restProps, originProps, true),
+
     // Override over origin props
     id,
     ref: composeRef(ref, originRef as any),
-    disabled,
-    tabIndex,
     autoComplete: autoComplete || 'off',
 
-    autoFocus,
     className: classNames(
       `${prefixCls}-selection-search-input`,
-      inputNode?.props?.className,
+      originProps.className,
       contextClassNames?.input,
     ),
 
@@ -105,48 +85,13 @@ const Input: React.ForwardRefRenderFunction<InputRef, InputProps> = (props, ref)
     'aria-activedescendant': open ? activeDescendantId : undefined,
     ...attrs,
     value: editable ? value : '',
-    maxLength,
     readOnly: !editable,
     unselectable: !editable ? 'on' : null,
 
-    style: { ...style, opacity: editable ? null : 0, ...contextStyles?.input },
-
-    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {
-      onKeyDown(event);
-      if (onOriginKeyDown) {
-        onOriginKeyDown(event);
-      }
-    },
-    onMouseDown: (event: React.MouseEvent<HTMLElement>) => {
-      onMouseDown(event);
-      if (onOriginMouseDown) {
-        onOriginMouseDown(event);
-      }
-    },
-    onChange: (event: React.ChangeEvent<HTMLElement>) => {
-      onChange(event);
-      if (onOriginChange) {
-        onOriginChange(event);
-      }
-    },
-    onCompositionStart(event: React.CompositionEvent<HTMLElement>) {
-      onCompositionStart(event);
-      if (onOriginCompositionStart) {
-        onOriginCompositionStart(event);
-      }
-    },
-    onCompositionEnd(event: React.CompositionEvent<HTMLElement>) {
-      onCompositionEnd(event);
-      if (onOriginCompositionEnd) {
-        onOriginCompositionEnd(event);
-      }
-    },
-    onPaste,
-    onBlur(event: React.FocusEvent<HTMLElement>) {
-      onBlur(event);
-      if (onOriginBlur) {
-        onOriginBlur(event);
-      }
+    style: {
+      ...originProps.style,
+      opacity: editable ? null : 0,
+      ...contextStyles?.input,
     },
   });
 

tests/Select.test.tsx

@@ -924,6 +924,7 @@ describe('Select.Basic', () => {
       const onCompositionEnd = jest.fn();
       const textareaRef = jest.fn();
       const mouseDownPreventDefault = jest.fn();
+      const onPaste = jest.fn();
       const { container } = render(
         <Select
           mode="combobox"
@@ -934,6 +935,7 @@ describe('Select.Basic', () => {
               onMouseDown={onMouseDown}
               onCompositionStart={onCompositionStart}
               onCompositionEnd={onCompositionEnd}
+              onPaste={onPaste}
               ref={textareaRef}
               className="custom-input"
             />
@@ -965,6 +967,13 @@ describe('Select.Basic', () => {
       expect(textareaRef).toHaveBeenCalled();
       expect(onCompositionStart).toHaveBeenCalled();
       expect(onCompositionEnd).toHaveBeenCalled();
+
+      fireEvent.paste(textareaEle, {
+        target: { value: 'hi' },
+        clipboardData: { getData: () => 'hi' },
+      });
+      expect(onPaste).toHaveBeenCalled();
+      expect(textareaEle.value).toEqual('hi');
     });
 
     it('not override customize props', () => {