fix: expose maxLength (#771)

* fix: expose maxLength and raise customInputElement maxLength priotiry

* test: add test

* test: update test

* chore: code clean

* test: fix warning

* chore: add warning

* chore: remove useless test

* chore: code clean

Author: MadCcc

src/BaseSelect.tsx

@@ -108,7 +108,6 @@ export interface BaseSelectPrivateProps {
   ) => void;
   /** Trigger when search text match the `tokenSeparators`. Will provide split content */
   onSearchSplit?: (words: string[]) => void;
-  maxLength?: number;
 
   // >>> Dropdown
   OptionList: React.ForwardRefExoticComponent<
@@ -126,6 +125,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
   showSearch?: boolean;
   tagRender?: (props: CustomTagProps) => React.ReactElement;
   direction?: 'ltr' | 'rtl';
+  maxLength?: number;
 
   // MISC
   tabIndex?: number;

src/Selector/Input.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { composeRef } from 'rc-util/lib/ref';
+import { warning } from 'rc-util/lib/warning';
 
 type InputRef = HTMLInputElement | HTMLTextAreaElement;
 
@@ -69,6 +70,11 @@ const Input: React.RefForwardingComponent<InputRef, InputProps> = (
     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,

src/Selector/index.tsx

@@ -61,6 +61,7 @@ export interface SelectorProps {
   searchValue: string;
   activeValue: string;
   inputElement: JSX.Element;
+  maxLength?: number;
 
   autoFocus?: boolean;
   activeDescendantId?: string;

tests/Combobox.test.tsx

@@ -152,7 +152,9 @@ describe('Select.Combobox', () => {
 
         public render() {
           const options = this.state.data.map((item) => (
-            <Option value={item.key}>{item.label}</Option>
+            <Option key={item.key} value={item.key}>
+              {item.label}
+            </Option>
           ));
           return (
             <Select
@@ -199,7 +201,9 @@ describe('Select.Combobox', () => {
 
         public render() {
           const options = this.state.data.map((item) => (
-            <Option value={item.key}>{item.label}</Option>
+            <Option key={item.key} value={item.key}>
+              {item.label}
+            </Option>
           ));
           return (
             <Select
@@ -361,7 +365,9 @@ describe('Select.Combobox', () => {
         return (
           <Select mode="combobox" onChange={this.updateOptions}>
             {this.state.options.map((opt) => (
-              <Option value={opt}>{opt}</Option>
+              <Option key={opt} value={opt}>
+                {opt}
+              </Option>
             ))}
           </Select>
         );