Skip to content

Commit 928844f

Browse files
afc163afc163
authored
fix: Select width became 0px when search after select something for antd 5 (#936)
* fix: Select width 0px when searching (#934) * fix: Select width became 0px when search after select something (#935) * chore: publish on branch 14.1.x * 14.1.17-0 * fix: Select width 0px when search again * fix np branch
1 parent 46c2dde commit 928844f

File tree

5 files changed

+67
-64
lines changed

5 files changed

+67
-64
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: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,12 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
6666
if (item) {
6767
return null;
6868
}
69-
const hiddenStyle = hasTextInput ? { visibility: 'hidden' as const } : undefined;
69+
const hiddenStyle = hasTextInput ? { visibility: 'hidden' } as React.CSSProperties : undefined;
7070
return (
71-
<span className={`${prefixCls}-selection-placeholder`} style={hiddenStyle}>
71+
<span
72+
className={`${prefixCls}-selection-placeholder`}
73+
style={hiddenStyle}
74+
>
7275
{placeholder}
7376
</span>
7477
);
@@ -105,11 +108,18 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
105108
</span>
106109

107110
{/* Display value */}
108-
{!combobox && item && !hasTextInput && (
109-
<span className={`${prefixCls}-selection-item`} title={selectionTitle}>
111+
{(!combobox && item) ? (
112+
<span
113+
className={`${prefixCls}-selection-item`}
114+
title={selectionTitle}
115+
// 当 Select 已经选中选项时，还需 selection 隐藏但留在原地占位
116+
// https://github.com/ant-design/ant-design/issues/27688
117+
// https://github.com/ant-design/ant-design/issues/41530
118+
style={hasTextInput ? { visibility: 'hidden' } as React.CSSProperties : undefined}
119+
>
110120
{item.label}
111121
</span>
112-
)}
122+
) : null}
113123

114124
{/* Display placeholder */}
115125
{renderPlaceholder()}

‎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(0);
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/placeholder.test.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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(0);
30+
expect(wrapper.find('.rc-select-selection-item').text()).toBe('light');
31+
toggleOpen(wrapper);
32+
expect(wrapper.find('.rc-select-selection-item').text()).toBe('light');
33+
});
34+
35+
it('should hide placeholder if force closed and showSearch with searchValue', () => {
36+
const wrapper = mount(
37+
<Select showSearch searchValue="search" open={false} placeholder="placeholder" />,
38+
);
39+
expect(
40+
(wrapper.find('.rc-select-selection-placeholder').getDOMNode() as HTMLSpanElement).style
41+
.visibility,
42+
).toBe('hidden');
43+
expect(wrapper.find('.rc-select-selection-placeholder').text()).toBe('placeholder');
44+
});
45+
});

0 commit comments

Comments
 (0)