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={() => (
-
+
)}
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 = (
editable,
accessibilityIndex,
value,
+ maxLength,
onKeyDown,
onMouseDown,
onChange,
@@ -86,6 +88,7 @@ const Input: React.RefForwardingComponent = (
'aria-activedescendant': `${id}_list_${accessibilityIndex}`,
...attrs,
value: editable ? value : '',
+ maxLength,
readOnly: !editable,
unselectable: !editable ? 'on' : null,
onKeyDown: (event: React.KeyboardEvent) => {
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 = props => {
showSearch,
searchValue,
activeValue,
+ maxLength,
onInputKeyDown,
onInputMouseDown,
@@ -88,6 +89,7 @@ const SingleSelector: React.FC = props => {
onCompositionEnd={onInputCompositionEnd}
tabIndex={tabIndex}
attrs={pickAttrs(props, true)}
+ maxLength={combobox && maxLength}
/>
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;
onInputMouseDown: React.MouseEventHandler;
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 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 {
/** Convert single raw value into { label, value } format. Will be called by each value */
getLabeledValue: GetLabeledValue>;
filterOptions: FilterOptions;
- findValueOption:// Need still support legacy ts api
+ findValueOption: // Need still support legacy ts api
| ((values: RawValueType[], options: FlattenOptionsType) => OptionsType)
// New API add prevValueOptions support
| ((
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();
+ expect(wrapper.find('input').props().maxLength).toBeFalsy();
+ });
+
+ it('normal should not support', () => {
+ const wrapper = mount();
+ expect(wrapper.find('input').props().maxLength).toBe(6);
+ });
+ });
});