feat: Combobox support max length (#574)

* feat: Combobox support maxLength

* test: Add test case

Author: zombieJ

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

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>) => {

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>
 

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

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

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);
+    });
+  });
 });