Skip to content

Commit

Permalink
fix: Form layout when Select has long text (#34117)
Browse files Browse the repository at this point in the history 
* fix: Form layout when Select has long text

close #33773

* chore: update snapshot
  • Loading branch information
@afc163
afc163 committed Feb 18, 2022
1 parent e0c1e06 commit 386ede9
Show file tree
Hide file tree
Showing 4 changed files with 422 additions and 33 deletions.
298 changes: 284 additions & 14 deletions components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Expand Up @@ -76,13 +76,148 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input"
id="advanced_search_field-1"
placeholder="placeholder"
type="text"
value=""
/>
<div
class="ant-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
>
<input
aria-activedescendant="advanced_search_field-1_list_0"
aria-autocomplete="list"
aria-controls="advanced_search_field-1_list"
aria-haspopup="listbox"
aria-owns="advanced_search_field-1_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="advanced_search_field-1"
readonly=""
role="combobox"
style="opacity:0"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
>
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
</span>
</div>
<div>
<div
class="ant-select-dropdown"
style="opacity:0;pointer-events:none"
>
<div>
<div
id="advanced_search_field-1_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="1"
aria-selected="false"
id="advanced_search_field-1_list_0"
role="option"
>
1
</div>
<div
aria-label="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
aria-selected="true"
id="advanced_search_field-1_list_1"
role="option"
>
2
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
>
<div
class="rc-virtual-list-holder"
style="max-height:256px;overflow-y:auto;overflow-anchor:none"
>
<div>
<div
class="rc-virtual-list-holder-inner"
style="display:flex;flex-direction:column"
>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option ant-select-item-option-active"
title="1"
>
<div
class="ant-select-item-option-content"
>
1
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
/>
</div>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-selected"
title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
>
<div
class="ant-select-item-option-content"
>
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -193,13 +328,148 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input"
id="advanced_search_field-4"
placeholder="placeholder"
type="text"
value=""
/>
<div
class="ant-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
>
<input
aria-activedescendant="advanced_search_field-4_list_0"
aria-autocomplete="list"
aria-controls="advanced_search_field-4_list"
aria-haspopup="listbox"
aria-owns="advanced_search_field-4_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="advanced_search_field-4"
readonly=""
role="combobox"
style="opacity:0"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
>
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
</span>
</div>
<div>
<div
class="ant-select-dropdown"
style="opacity:0;pointer-events:none"
>
<div>
<div
id="advanced_search_field-4_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="1"
aria-selected="false"
id="advanced_search_field-4_list_0"
role="option"
>
1
</div>
<div
aria-label="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
aria-selected="true"
id="advanced_search_field-4_list_1"
role="option"
>
2
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
>
<div
class="rc-virtual-list-holder"
style="max-height:256px;overflow-y:auto;overflow-anchor:none"
>
<div>
<div
class="rc-virtual-list-holder-inner"
style="display:flex;flex-direction:column"
>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option ant-select-item-option-active"
title="1"
>
<div
class="ant-select-item-option-content"
>
1
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
/>
</div>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-selected"
title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
>
<div
class="ant-select-item-option-content"
>
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 386ede9

Please sign in to comment.