Skip to content

Commit 74d796f

Browse files
zombieJzombieJ
committed
fix: not filter list when showSearch is false
ref ant-design/ant-design#20229
1 parent 9ee3615 commit 74d796f

File tree

4 files changed

+60
-25
lines changed

4 files changed

+60
-25
lines changed

‎src/Selector/index.tsx

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,15 @@ export interface InnerSelectorProps {
3232
open: boolean;
3333
tabIndex?: number;
3434

35-
onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
36-
onInputMouseDown: React.MouseEventHandler<HTMLInputElement | HTMLTextAreaElement>;
37-
onInputChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
35+
onInputKeyDown: React.KeyboardEventHandler<
36+
HTMLInputElement | HTMLTextAreaElement
37+
>;
38+
onInputMouseDown: React.MouseEventHandler<
39+
HTMLInputElement | HTMLTextAreaElement
40+
>;
41+
onInputChange: React.ChangeEventHandler<
42+
HTMLInputElement | HTMLTextAreaElement
43+
>;
3844
}
3945

4046
export interface RefSelectorProps {
@@ -65,7 +71,9 @@ export interface SelectorProps {
6571
// Tags
6672
maxTagCount?: number;
6773
maxTagTextLength?: number;
68-
maxTagPlaceholder?: React.ReactNode | ((omittedValues: LabelValueType[]) => React.ReactNode);
74+
maxTagPlaceholder?:
75+
| React.ReactNode
76+
| ((omittedValues: LabelValueType[]) => React.ReactNode);
6977

7078
// Motion
7179
choiceTransitionName?: string;
@@ -74,7 +82,9 @@ export interface SelectorProps {
7482
/** `onSearch` returns go next step boolean to check if need do toggle open */
7583
onSearch: (searchValue: string) => boolean;
7684
onSelect: (value: RawValueType, option: { selected: boolean }) => void;
77-
onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
85+
onInputKeyDown?: React.KeyboardEventHandler<
86+
HTMLInputElement | HTMLTextAreaElement
87+
>;
7888

7989
/**
8090
* @private get real dom for trigger align.
@@ -83,7 +93,10 @@ export interface SelectorProps {
8393
domRef: React.Ref<HTMLDivElement>;
8494
}
8595

86-
const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> = (props, ref) => {
96+
const Selector: React.RefForwardingComponent<
97+
RefSelectorProps,
98+
SelectorProps
99+
> = (props, ref) => {
87100
const inputRef = React.useRef<HTMLInputElement>(null);
88101

89102
const {
@@ -110,7 +123,9 @@ const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> =
110123
// ====================== Input ======================
111124
const [getInputMouseDown, setInputMouseDown] = useLock(0);
112125

113-
const onInternalInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = event => {
126+
const onInternalInputKeyDown: React.KeyboardEventHandler<
127+
HTMLInputElement
128+
> = event => {
114129
const { which } = event;
115130

116131
if (which === KeyCode.UP || which === KeyCode.DOWN) {
@@ -121,7 +136,11 @@ const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> =
121136
onInputKeyDown(event);
122137
}
123138

124-
if (![KeyCode.SHIFT, KeyCode.TAB, KeyCode.BACKSPACE, KeyCode.ESC].includes(which)) {
139+
if (
140+
![KeyCode.SHIFT, KeyCode.TAB, KeyCode.BACKSPACE, KeyCode.ESC].includes(
141+
which,
142+
)
143+
) {
125144
onToggleOpen(true);
126145
}
127146
};
@@ -130,7 +149,9 @@ const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> =
130149
* We can not use `findDOMNode` sine it will get warning,
131150
* have to use timer to check if is input element.
132151
*/
133-
const onInternalInputMouseDown: React.MouseEventHandler<HTMLInputElement> = () => {
152+
const onInternalInputMouseDown: React.MouseEventHandler<
153+
HTMLInputElement
154+
> = () => {
134155
setInputMouseDown(true);
135156
};
136157

@@ -182,7 +203,9 @@ const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> =
182203
);
183204
};
184205

185-
const ForwardSelector = React.forwardRef<RefSelectorProps, SelectorProps>(Selector);
206+
const ForwardSelector = React.forwardRef<RefSelectorProps, SelectorProps>(
207+
Selector,
208+
);
186209
ForwardSelector.displayName = 'Selector';
187210

188211
export default ForwardSelector;

‎src/generate.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -432,7 +432,7 @@ export default function generateSelector<
432432

433433
// Display options for OptionList
434434
const displayOptions = React.useMemo<OptionsType>(() => {
435-
if (!mergedSearchValue) {
435+
if (!mergedSearchValue || !mergedShowSearch) {
436436
return [...mergedOptions] as OptionsType;
437437
}
438438
const filteredOptions: OptionsType = filterOptions(
@@ -458,7 +458,7 @@ export default function generateSelector<
458458
}
459459

460460
return filteredOptions;
461-
}, [mergedOptions, mergedSearchValue, mode]);
461+
}, [mergedOptions, mergedSearchValue, mode, mergedShowSearch]);
462462

463463
const displayFlattenOptions: FlattenOptionsType<
464464
OptionsType

‎tests/Select.test.tsx

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ describe('Select.Basic', () => {
238238

239239
it('filter options by "value" prop by default', () => {
240240
const wrapper = mount(
241-
<Select>
241+
<Select showSearch>
242242
<Option value="1">One</Option>
243243
<Option value="2">Two</Option>
244244
</Select>,
@@ -253,7 +253,7 @@ describe('Select.Basic', () => {
253253

254254
it('should filter options when filterOption is true', () => {
255255
const wrapper = mount(
256-
<Select filterOption>
256+
<Select showSearch filterOption>
257257
<Option value="1">One</Option>
258258
<Option value="2">Two</Option>
259259
</Select>,
@@ -280,7 +280,7 @@ describe('Select.Basic', () => {
280280

281281
it('specify which prop to filter', () => {
282282
const wrapper = mount(
283-
<Select optionFilterProp="label">
283+
<Select optionFilterProp="label" showSearch>
284284
<Option value="1" label="One">
285285
1
286286
</Option>
@@ -298,7 +298,7 @@ describe('Select.Basic', () => {
298298

299299
it('filter array children', () => {
300300
const wrapper = mount(
301-
<Select optionFilterProp="children">
301+
<Select optionFilterProp="children" showSearch>
302302
<Option value="1" label="One">
303303
One{1}
304304
</Option>
@@ -852,7 +852,7 @@ describe('Select.Basic', () => {
852852

853853
it('filters options by inputValue', () => {
854854
const wrapper = mount(
855-
<Select open>
855+
<Select showSearch open>
856856
<Option value="1">1</Option>
857857
<Option value="2">2</Option>
858858
<Option value="11" disabled>
@@ -869,18 +869,20 @@ describe('Select.Basic', () => {
869869
it('should include disabled item in options', () => {
870870
const wrapper = mount(
871871
<Select mode="tags" open value={['name1']}>
872-
<Option key="name1" disabled>
872+
<Option key="name1" value="name1" disabled>
873873
name1
874874
</Option>
875-
<Option key="name2">name2</Option>
875+
<Option key="name2" value="name2">
876+
name2
877+
</Option>
876878
</Select>,
877879
);
878880
expect(wrapper.find('List').props().data).toHaveLength(2);
879881
});
880882

881883
it('renders not found when search result is empty', () => {
882884
const wrapper = mount(
883-
<Select open>
885+
<Select showSearch open>
884886
<Option value="1">1</Option>
885887
<Option value="2">2</Option>
886888
</Select>,
@@ -924,7 +926,7 @@ describe('Select.Basic', () => {
924926

925927
it('filterOption could be true as described in default value', () => {
926928
const wrapper = mount(
927-
<Select searchValue="3" filterOption open>
929+
<Select searchValue="3" showSearch filterOption open>
928930
<Option value="1">1</Option>
929931
<Option value="2">2</Option>
930932
</Select>,
@@ -1084,7 +1086,7 @@ describe('Select.Basic', () => {
10841086

10851087
it('default filterOption is case insensitive', () => {
10861088
const wrapper = mount(
1087-
<Select>
1089+
<Select showSearch>
10881090
<Option value="ABC">ABC</Option>
10891091
<Option value="DEF">DEF</Option>
10901092
</Select>,
@@ -1435,4 +1437,15 @@ describe('Select.Basic', () => {
14351437

14361438
wrapper.unmount();
14371439
});
1440+
1441+
it('search should not work when `showSearch` is false', () => {
1442+
const wrapper = mount(
1443+
<Select open>
1444+
<Option value="1">One</Option>
1445+
</Select>,
1446+
);
1447+
1448+
wrapper.find('input').simulate('change', 'Z');
1449+
expect(wrapper.find('List').props().data).toHaveLength(1);
1450+
});
14381451
});

‎tests/__snapshots__/Select.test.tsx.snap

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
121121

122122
exports[`Select.Basic filterOption could be true as described in default value 1`] = `
123123
<div
124-
class="rc-select rc-select-single rc-select-show-arrow rc-select-open"
124+
class="rc-select rc-select-single rc-select-show-arrow rc-select-open rc-select-show-search"
125125
>
126126
<div
127127
class="rc-select-selector"
@@ -140,8 +140,7 @@ exports[`Select.Basic filterOption could be true as described in default value 1
140140
class="rc-select-selection-search-input"
141141
id="rc_select_TEST_OR_SSR"
142142
role="combobox"
143-
style="opacity: 0;"
144-
value=""
143+
value="3"
145144
/>
146145
</span>
147146
</div>

0 commit comments

Comments
 (0)