From 96fdea9fcee6d3c8d78f7097ab43be054118eb59 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Fri, 27 Nov 2020 10:43:26 +0800
Subject: [PATCH 1/2] feat: Combobox support maxLength

---
 examples/combobox.tsx           | 9 +++------
 src/Selector/Input.tsx          | 3 +++
 src/Selector/SingleSelector.tsx | 2 ++
 src/Selector/index.tsx          | 1 +
 src/generate.tsx                | 4 +++-
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/examples/combobox.tsx b/examples/combobox.tsx
index 981bd68c3..189254f6e 100644
--- a/examples/combobox.tsx
+++ b/examples/combobox.tsx
@@ -89,8 +89,9 @@ class Combobox extends React.Component {
             onInputKeyDown={this.onKeyDown}
             notFoundContent=""
             allowClear
-            placeholder="please select"
+            placeholder="please input, max len: 10"
             value={value}
+            maxLength={10}
             mode="combobox"
             backfill
             onFocus={() => console.log('focus')}
@@ -112,11 +113,7 @@ class Combobox extends React.Component {
             mode="combobox"
             style={{ width: 200 }}
             getInputElement={() => (
-              <textarea
-                style={{ background: 'red' }}
-                rows={3}
-                ref={this.textareaRef}
-              />
+              <textarea style={{ background: 'red' }} rows={3} ref={this.textareaRef} />
             )}
             options={[{ value: 'light' }, { value: 'bamboo' }]}
             allowClear
diff --git a/src/Selector/Input.tsx b/src/Selector/Input.tsx
index 9d78b9dc0..9f904f8b9 100644
--- a/src/Selector/Input.tsx
+++ b/src/Selector/Input.tsx
@@ -13,6 +13,7 @@ interface InputProps {
   editable: boolean;
   accessibilityIndex: number;
   value: string;
+  maxLength?: number;
   open: boolean;
   tabIndex: number;
   /** Pass accessibility props to input */
@@ -42,6 +43,7 @@ const Input: React.RefForwardingComponent<InputRef, InputProps> = (
     editable,
     accessibilityIndex,
     value,
+    maxLength,
     onKeyDown,
     onMouseDown,
     onChange,
@@ -86,6 +88,7 @@ const Input: React.RefForwardingComponent<InputRef, InputProps> = (
     'aria-activedescendant': `${id}_list_${accessibilityIndex}`,
     ...attrs,
     value: editable ? value : '',
+    maxLength,
     readOnly: !editable,
     unselectable: !editable ? 'on' : null,
     onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {
diff --git a/src/Selector/SingleSelector.tsx b/src/Selector/SingleSelector.tsx
index 87c1713b8..1e25dcf95 100644
--- a/src/Selector/SingleSelector.tsx
+++ b/src/Selector/SingleSelector.tsx
@@ -28,6 +28,7 @@ const SingleSelector: React.FC<SelectorProps> = props => {
     showSearch,
     searchValue,
     activeValue,
+    maxLength,
 
     onInputKeyDown,
     onInputMouseDown,
@@ -88,6 +89,7 @@ const SingleSelector: React.FC<SelectorProps> = props => {
           onCompositionEnd={onInputCompositionEnd}
           tabIndex={tabIndex}
           attrs={pickAttrs(props, true)}
+          maxLength={combobox && maxLength}
         />
       </span>
 
diff --git a/src/Selector/index.tsx b/src/Selector/index.tsx
index f9fb9a9f1..ddc276d42 100644
--- a/src/Selector/index.tsx
+++ b/src/Selector/index.tsx
@@ -33,6 +33,7 @@ export interface InnerSelectorProps {
   accessibilityIndex: number;
   open: boolean;
   tabIndex?: number;
+  maxLength?: number;
 
   onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   onInputMouseDown: React.MouseEventHandler<HTMLInputElement | HTMLTextAreaElement>;
diff --git a/src/generate.tsx b/src/generate.tsx
index e4bd8023b..f3da06c33 100644
--- a/src/generate.tsx
+++ b/src/generate.tsx
@@ -74,6 +74,8 @@ export interface SelectProps<OptionsType extends object[], ValueType> extends Re
   value?: ValueType;
   defaultValue?: ValueType;
   labelInValue?: boolean;
+  /** Config max length of input. This is only work when `mode` is `combobox` */
+  maxLength?: number;
 
   // Search
   inputValue?: string;
@@ -188,7 +190,7 @@ export interface GenerateConfig<OptionsType extends object[]> {
   /** Convert single raw value into { label, value } format. Will be called by each value */
   getLabeledValue: GetLabeledValue<FlattenOptionsType<OptionsType>>;
   filterOptions: FilterOptions<OptionsType>;
-  findValueOption:// Need still support legacy ts api
+  findValueOption: // Need still support legacy ts api
     | ((values: RawValueType[], options: FlattenOptionsType<OptionsType>) => OptionsType)
     // New API add prevValueOptions support
     | ((

From a03cec3659df5a774b7dd1167555d5af3a6ce87b Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Fri, 27 Nov 2020 10:47:18 +0800
Subject: [PATCH 2/2] test: Add test case

---
 tests/Combobox.test.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/tests/Combobox.test.tsx b/tests/Combobox.test.tsx
index 44ddc4cee..cd688b5e5 100644
--- a/tests/Combobox.test.tsx
+++ b/tests/Combobox.test.tsx
@@ -447,4 +447,16 @@ describe('Select.Combobox', () => {
 
     expect(wrapper.find('input').props().value).toBe('');
   });
+
+  describe('maxLength', () => {
+    it('should support', () => {
+      const wrapper = mount(<Select maxLength={6} />);
+      expect(wrapper.find('input').props().maxLength).toBeFalsy();
+    });
+
+    it('normal should not support', () => {
+      const wrapper = mount(<Select mode="combobox" maxLength={6} />);
+      expect(wrapper.find('input').props().maxLength).toBe(6);
+    });
+  });
 });