Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: add root element for SingleSelector to make layout easier
Browse files Browse the repository at this point in the history
guoyunhe committed Oct 11, 2024
1 parent fb2a981 commit 046105b
Showing 5 changed files with 198 additions and 161 deletions.
5 changes: 5 additions & 0 deletions assets/index.less
Original file line number Diff line number Diff line change
@@ -70,6 +70,11 @@
display: flex;
position: relative;

.@{select-prefix}-selection {
width: 100%;
position: relative;
}

.@{select-prefix}-selection-search {
width: 100%;
position: relative;
4 changes: 2 additions & 2 deletions src/Selector/SingleSelector.tsx
Original file line number Diff line number Diff line change
@@ -77,7 +77,7 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
}, [item, hasTextInput, placeholder, prefixCls]);

return (
<>
<span className={`${prefixCls}-selection`}>
<span className={`${prefixCls}-selection-search`}>
<Input
ref={inputRef}
@@ -121,7 +121,7 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
{item.label}
</span>
) : null}
</>
</span>
);
};

72 changes: 40 additions & 32 deletions tests/__snapshots__/Combobox.test.tsx.snap
Original file line number Diff line number Diff line change
@@ -8,25 +8,29 @@ exports[`Select.Combobox renders controlled correctly 1`] = `
class="rc-select-selector"
>
<span
class="rc-select-selection-search"
class="rc-select-selection"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="rc-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
<span
class="rc-select-selection-placeholder"
class="rc-select-selection-search"
>
Search
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="rc-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
<span
class="rc-select-selection-placeholder"
>
Search
</span>
</span>
</span>
</div>
@@ -41,25 +45,29 @@ exports[`Select.Combobox renders correctly 1`] = `
class="rc-select-selector"
>
<span
class="rc-select-selection-search"
class="rc-select-selection"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="rc-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
<span
class="rc-select-selection-placeholder"
class="rc-select-selection-search"
>
Search
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="rc-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
<span
class="rc-select-selection-placeholder"
>
Search
</span>
</span>
</span>
</div>
276 changes: 150 additions & 126 deletions tests/__snapshots__/Select.test.tsx.snap
Original file line number Diff line number Diff line change
@@ -116,30 +116,34 @@ exports[`Select.Basic no search 1`] = `
class="rc-select-selector"
>
<span
class="rc-select-selection-search"
class="rc-select-selection"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="rc-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="rc-select-selection-item"
title="1"
>
1
<span
class="rc-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="rc-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="rc-select-selection-item"
title="1"
>
1
</span>
</span>
</div>
</div>
@@ -155,29 +159,33 @@ exports[`Select.Basic render renders aria-attributes correctly 1`] = `
class="antd-selector"
>
<span
class="antd-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="some-label"
aria-labelledby="test-id"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="antd-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="antd-selection-item"
title="2"
class="antd-selection"
>
2
<span
class="antd-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="some-label"
aria-labelledby="test-id"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="antd-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="antd-selection-item"
title="2"
>
2
</span>
</span>
</div>
<span
@@ -203,27 +211,31 @@ exports[`Select.Basic render renders correctly 1`] = `
class="antd-selector"
>
<span
class="antd-selection-search"
class="antd-selection"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="antd-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="antd-selection-item"
title="2"
>
2
<span
class="antd-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="antd-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="antd-selection-item"
title="2"
>
2
</span>
</span>
</div>
<span
@@ -251,27 +263,31 @@ exports[`Select.Basic render renders data-attributes correctly 1`] = `
class="antd-selector"
>
<span
class="antd-selection-search"
class="antd-selection"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="antd-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="antd-selection-item"
title="2"
>
2
<span
class="antd-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="antd-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="antd-selection-item"
title="2"
>
2
</span>
</span>
</div>
<span
@@ -297,28 +313,32 @@ exports[`Select.Basic render renders disabled select correctly 1`] = `
class="antd-selector"
>
<span
class="antd-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="antd-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="antd-selection-item"
title="2"
class="antd-selection"
>
2
<span
class="antd-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="antd-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="antd-selection-item"
title="2"
>
2
</span>
</span>
</div>
</div>
@@ -335,27 +355,31 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
class="antd-selector"
>
<span
class="antd-selection-search"
class="antd-selection"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="antd-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="button"
type="search"
value=""
/>
</span>
<span
class="antd-selection-item"
title="2"
>
2
<span
class="antd-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="antd-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="button"
type="search"
value=""
/>
</span>
<span
class="antd-selection-item"
title="2"
>
2
</span>
</span>
</div>
<span
2 changes: 1 addition & 1 deletion tests/__snapshots__/ssr.test.tsx.snap
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Select.SSR should work 1`] = `"<div class="rc-select rc-select-single"><div class="rc-select-selector"><span class="rc-select-selection-search"><input type="search" autoComplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="undefined_list" aria-autocomplete="list" aria-controls="undefined_list" readonly="" unselectable="on" style="opacity:0" value=""/><span class="rc-select-selection-placeholder"></span></span></div></div>"`;
exports[`Select.SSR should work 1`] = `"<div class="rc-select rc-select-single"><div class="rc-select-selector"><span class="rc-select-selection"><span class="rc-select-selection-search"><input type="search" autoComplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="undefined_list" aria-autocomplete="list" aria-controls="undefined_list" readonly="" unselectable="on" style="opacity:0" value=""/><span class="rc-select-selection-placeholder"></span></span></span></div></div>"`;

0 comments on commit 046105b

Please sign in to comment.