Skip to content

Commit f367024

Browse files
afc163afc163
authored
fix: Select width 0px when searching (#934)
1 parent 1f3c35f commit f367024

File tree

6 files changed

+108
-65
lines changed

6 files changed

+108
-65
lines changed

‎docs/examples/single.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,14 +60,13 @@ class Test extends React.Component {
6060

6161
<h2>Single Select</h2>
6262

63-
<div style={{ width: 300 }}>
63+
<div>
6464
<Select
6565
autoFocus
6666
id="my-select"
6767
value={value}
6868
placeholder="placeholder"
6969
showSearch
70-
style={{ width: 500 }}
7170
onBlur={this.onBlur}
7271
onFocus={this.onFocus}
7372
onSearch={this.onSearch}

‎src/Selector/SingleSelector.tsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,18 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
6161
// Get title
6262
const title = getTitle(item);
6363

64+
// 当 Select 已经选中了选型时，placeholder 隐藏，但留在原地占位，内容是选中项文本，这样宽度不会缩减为 0px
65+
// https://github.com/ant-design/ant-design/issues/27688
66+
// https://github.com/ant-design/ant-design/issues/41530
6467
const renderPlaceholder = () => {
65-
if (item) {
66-
return null;
67-
}
68-
const hiddenStyle = hasTextInput ? { visibility: 'hidden' as const } : undefined;
68+
const hiddenStyle = (hasTextInput || item)
69+
? { visibility: 'hidden' } as React.CSSProperties : undefined;
6970
return (
70-
<span className={`${prefixCls}-selection-placeholder`} style={hiddenStyle}>
71-
{placeholder}
71+
<span
72+
className={`${prefixCls}-selection-placeholder`}
73+
style={hiddenStyle}
74+
>
75+
{item ? item.label : placeholder}
7276
</span>
7377
);
7478
};

‎tests/Combobox.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ describe('Select.Combobox', () => {
7474
expect(wrapper.find('input').props().value).toBe('');
7575
expect(wrapper.find('.rc-select-selection-placeholder').text()).toEqual('placeholder');
7676
wrapper.find('input').simulate('change', { target: { value: '1' } });
77-
expect(wrapper.find('.rc-select-selection-placeholder').length).toBeFalsy();
77+
expect(wrapper.find('.rc-select-selection-placeholder').length).toBe(1);
7878
expect(wrapper.find('input').props().value).toBe('1');
7979
});
8080

‎tests/Select.test.tsx

Lines changed: 5 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -595,18 +595,16 @@ describe('Select.Basic', () => {
595595
expect(wrapper.find('.rc-select').getDOMNode().className).toContain('-focus');
596596
});
597597

598-
it('click placeholder should trigger onFocus', () => {
599-
const wrapper2 = mount(
598+
it('focus input when placeholder is clicked', () => {
599+
const wrapper = mount(
600600
<Select placeholder="xxxx">
601601
<Option value="1">1</Option>
602602
<Option value="2">2</Option>
603603
</Select>,
604604
);
605-
606-
const inputSpy = jest.spyOn(wrapper2.find('input').instance(), 'focus' as any);
607-
608-
wrapper2.find('.rc-select-selection-placeholder').simulate('mousedown');
609-
wrapper2.find('.rc-select-selection-placeholder').simulate('click');
605+
const inputSpy = jest.spyOn(wrapper.find('input').instance(), 'focus' as any);
606+
wrapper.find('.rc-select-selection-placeholder').simulate('mousedown');
607+
wrapper.find('.rc-select-selection-placeholder').simulate('click');
610608
expect(inputSpy).toHaveBeenCalled();
611609
});
612610
});
@@ -816,19 +814,6 @@ describe('Select.Basic', () => {
816814
expectOpen(wrapper, false);
817815
});
818816

819-
it('focus input when placeholder is clicked', () => {
820-
const wrapper = mount(
821-
<Select placeholder="select">
822-
<Option value="1">1</Option>
823-
</Select>,
824-
);
825-
826-
const focusSpy = jest.spyOn(wrapper.find('input').instance(), 'focus' as any);
827-
wrapper.find('.rc-select-selection-placeholder').simulate('mousedown');
828-
wrapper.find('.rc-select-selection-placeholder').simulate('click');
829-
expect(focusSpy).toHaveBeenCalled();
830-
});
831-
832817
describe('combobox could customize input element', () => {
833818
it('work', () => {
834819
const onKeyDown = jest.fn();
@@ -1736,32 +1721,6 @@ describe('Select.Basic', () => {
17361721
});
17371722
});
17381723

1739-
describe('show placeholder', () => {
1740-
it('when searchValue is controlled', () => {
1741-
const wrapper = mount(<Select searchValue="light" placeholder="bamboo" />);
1742-
expect(
1743-
wrapper.find('.rc-select-selection-placeholder').getDOMNode().hasAttribute('style'),
1744-
).toBe(false);
1745-
toggleOpen(wrapper);
1746-
expect(
1747-
(wrapper.find('.rc-select-selection-placeholder').getDOMNode() as HTMLSpanElement).style
1748-
.visibility,
1749-
).toBe('hidden');
1750-
});
1751-
1752-
it('when value is null', () => {
1753-
const wrapper = mount(<Select value={null} placeholder="bamboo" />);
1754-
expect(wrapper.find('.rc-select-selection-placeholder').length).toBeTruthy();
1755-
});
1756-
1757-
it('not when value is null but it is an Option', () => {
1758-
const wrapper = mount(
1759-
<Select value={null} placeholder="bamboo" options={[{ value: null, label: 'light' }]} />,
1760-
);
1761-
expect(wrapper.find('.rc-select-selection-placeholder').length).toBeFalsy();
1762-
});
1763-
});
1764-
17651724
it('Remove options can keep the cache', () => {
17661725
const wrapper = mount(<Select value={903} options={[{ value: 903, label: 'Bamboo' }]} />);
17671726
expect(findSelection(wrapper).text()).toEqual('Bamboo');
@@ -1894,16 +1853,6 @@ describe('Select.Basic', () => {
18941853
expect(onClick).toHaveBeenCalled();
18951854
});
18961855

1897-
it('should hide placeholder if force closed and showSearch with searchValue', () => {
1898-
const wrapper = mount(
1899-
<Select showSearch searchValue="search" open={false} placeholder="placeholder" />,
1900-
);
1901-
expect(
1902-
(wrapper.find('.rc-select-selection-placeholder').getDOMNode() as HTMLSpanElement).style
1903-
.visibility,
1904-
).toBe('hidden');
1905-
});
1906-
19071856
it('no warning for non-dom attr', () => {
19081857
const wrapper = mount(
19091858
<Select open>

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,12 @@ exports[`Select.Basic no search 1`] = `
226226
>
227227
1
228228
</span>
229+
<span
230+
class="rc-select-selection-placeholder"
231+
style="visibility:hidden"
232+
>
233+
1
234+
</span>
229235
</div>
230236
<span
231237
aria-hidden="true"
@@ -273,6 +279,12 @@ exports[`Select.Basic render renders aria-attributes correctly 1`] = `
273279
>
274280
2
275281
</span>
282+
<span
283+
class="antd-selection-placeholder"
284+
style="visibility:hidden"
285+
>
286+
2
287+
</span>
276288
</div>
277289
<span
278290
aria-hidden="true"
@@ -328,6 +340,12 @@ exports[`Select.Basic render renders correctly 1`] = `
328340
>
329341
2
330342
</span>
343+
<span
344+
class="antd-selection-placeholder"
345+
style="visibility:hidden"
346+
>
347+
2
348+
</span>
331349
</div>
332350
<span
333351
aria-hidden="true"
@@ -385,6 +403,12 @@ exports[`Select.Basic render renders data-attributes correctly 1`] = `
385403
>
386404
2
387405
</span>
406+
<span
407+
class="antd-selection-placeholder"
408+
style="visibility:hidden"
409+
>
410+
2
411+
</span>
388412
</div>
389413
<span
390414
aria-hidden="true"
@@ -442,6 +466,12 @@ exports[`Select.Basic render renders disabled select correctly 1`] = `
442466
>
443467
2
444468
</span>
469+
<span
470+
class="antd-selection-placeholder"
471+
style="visibility:hidden"
472+
>
473+
2
474+
</span>
445475
</div>
446476
<span
447477
aria-hidden="true"
@@ -486,6 +516,12 @@ exports[`Select.Basic render renders dropdown correctly 1`] = `
486516
>
487517
2
488518
</span>
519+
<span
520+
class="antd-selection-placeholder"
521+
style="visibility:hidden"
522+
>
523+
2
524+
</span>
489525
</div>
490526
<div>
491527
<div
@@ -672,6 +708,12 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
672708
>
673709
2
674710
</span>
711+
<span
712+
class="antd-selection-placeholder"
713+
style="visibility:hidden"
714+
>
715+
2
716+
</span>
675717
</div>
676718
<span
677719
aria-hidden="true"
@@ -731,6 +773,12 @@ exports[`Select.Basic should contain falsy children 1`] = `
731773
>
732774
1
733775
</span>
776+
<span
777+
class="rc-select-selection-placeholder"
778+
style="visibility:hidden"
779+
>
780+
1
781+
</span>
734782
</div>
735783
<div>
736784
<div

‎tests/placeholder.test.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { mount } from 'enzyme';
2+
import React from 'react';
3+
import Select from '../src';
4+
import { toggleOpen } from './utils/common';
5+
6+
describe('Select placeholder', () => {
7+
it('when searchValue is controlled', () => {
8+
const wrapper = mount(<Select searchValue="light" placeholder="bamboo" />);
9+
expect(
10+
wrapper.find('.rc-select-selection-placeholder').getDOMNode().hasAttribute('style'),
11+
).toBe(false);
12+
toggleOpen(wrapper);
13+
expect(
14+
(wrapper.find('.rc-select-selection-placeholder').getDOMNode() as HTMLSpanElement).style
15+
.visibility,
16+
).toBe('hidden');
17+
});
18+
19+
it('when value is null', () => {
20+
const wrapper = mount(<Select value={null} placeholder="bamboo" />);
21+
expect(wrapper.find('.rc-select-selection-placeholder').length).toBe(1);
22+
expect(wrapper.find('.rc-select-selection-placeholder').text()).toBe('bamboo');
23+
});
24+
25+
it('not when value is null but it is an Option', () => {
26+
const wrapper = mount(
27+
<Select value={null} placeholder="bamboo" options={[{ value: null, label: 'light' }]} />,
28+
);
29+
expect(wrapper.find('.rc-select-selection-placeholder').length).toBe(1);
30+
expect(wrapper.find('.rc-select-selection-placeholder').text()).toBe('light');
31+
});
32+
33+
it('should hide placeholder if force closed and showSearch with searchValue', () => {
34+
const wrapper = mount(
35+
<Select showSearch searchValue="search" open={false} placeholder="placeholder" />,
36+
);
37+
expect(
38+
(wrapper.find('.rc-select-selection-placeholder').getDOMNode() as HTMLSpanElement).style
39+
.visibility,
40+
).toBe('hidden');
41+
expect(wrapper.find('.rc-select-selection-placeholder').text()).toBe('placeholder');
42+
});
43+
});

0 commit comments

Comments
 (0)