github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: menu support scoped style, close #5578

pull/5590/head
tangjinzhou 2022-05-10 14:26:24 +08:00
parent d315b61418
commit ebc2082934
9 changed files with 119 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/cascader/__tests__/__snapshots__/demo.test.js.snap
View File

@ -88,6 +88,7 @@ exports[`renders ./components/cascader/demo/multiple.vue correctly 1`] = `
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div><span class="ant-select-selection-placeholder">Please select</span>
</div>
<!---->

1
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1355,6 +1355,7 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="validate_other_select-multiple" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="validate_other_select-multiple_list" aria-autocomplete="list" aria-controls="validate_other_select-multiple_list" aria-activedescendant="validate_other_select-multiple_list_0" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div><span class="ant-select-selection-placeholder">Please select favourite colors</span>
</div>
<!---->

99
components/layout/__tests__/__snapshots__/demo.test.js.snap
View File

@ -61,12 +61,9 @@ exports[`renders ./components/layout/demo/custom-trigger.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
</div>
</div>
<!---->
</aside>
@ -101,12 +98,9 @@ exports[`renders ./components/layout/demo/fixed.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
</div>
</header>
<main class="ant-layout-content" style="padding: 0px 50px; margin-top: 64px;">
<div class="ant-breadcrumb" style="margin: 16px 0px;"><span><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">App</span><span class="ant-breadcrumb-separator">/</span></span></div>
@ -156,17 +150,9 @@ exports[`renders ./components/layout/demo/fixed-sider.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
</div>
</div>
<!---->
</aside>
@ -204,13 +190,9 @@ exports[`renders ./components/layout/demo/responsive.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
<!---->
</div>
</div><span class="ant-layout-sider-zero-width-trigger ant-layout-sider-zero-width-trigger-left"><span role="img" aria-label="bars" class="anticon anticon-bars"><svg focusable="false" class="" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></span>
</aside>
<section class="ant-layout">
@ -275,17 +257,9 @@ exports[`renders ./components/layout/demo/side.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
</div>
</div>
<div class="ant-layout-sider-trigger" style="width: 200px;"><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></div>
</aside>
@ -324,12 +298,9 @@ exports[`renders ./components/layout/demo/top.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
</div>
</header>
<main class="ant-layout-content" style="padding: 0px 50px;">
<div class="ant-breadcrumb" style="margin: 16px 0px;"><span><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">App</span><span class="ant-breadcrumb-separator">/</span></span></div>
@ -363,12 +334,9 @@ exports[`renders ./components/layout/demo/top-side.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
</div>
</header>
<main class="ant-layout-content" style="padding: 0px 50px;">
<div class="ant-breadcrumb" style="margin: 16px 0px;"><span><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">App</span><span class="ant-breadcrumb-separator">/</span></span></div>
@ -444,21 +412,9 @@ exports[`renders ./components/layout/demo/top-side.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
</div>
</div>
<!---->
</aside>
@ -493,12 +449,9 @@ exports[`renders ./components/layout/demo/top-side-2.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
</div>
</header>
<section class="ant-layout ant-layout-has-sider">
<aside style="max-width: 200px; min-width: 200px; width: 200px; background: rgb(255, 255, 255); flex: 0 0 200px;" class="ant-layout-sider ant-layout-sider-dark">
@ -572,21 +525,9 @@ exports[`renders ./components/layout/demo/top-side-2.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
</div>
</div>
<!---->
</aside>

106
components/menu/__tests__/__snapshots__/demo.test.js.snap
View File

@ -22,16 +22,9 @@ exports[`renders ./components/menu/demo/horizontal.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
</div>
`;
exports[`renders ./components/menu/demo/inline.vue correctly 1`] = `
@ -120,21 +113,9 @@ exports[`renders ./components/menu/demo/inline.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
</div>
`;
exports[`renders ./components/menu/demo/inline-collapsed.vue correctly 1`] = `
@ -200,20 +181,9 @@ exports[`renders ./components/menu/demo/inline-collapsed.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
</div>
</div>
`;
@ -296,21 +266,9 @@ exports[`renders ./components/menu/demo/sider-current.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
</div>
</div>
`;
@ -381,19 +339,9 @@ exports[`renders ./components/menu/demo/switch-mode.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
</div>
</div>
`;
@ -420,11 +368,9 @@ exports[`renders ./components/menu/demo/template.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
</div>
</div>
`;
@ -491,19 +437,9 @@ exports[`renders ./components/menu/demo/theme.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
</div>
</div>
`;
@ -525,17 +461,7 @@ exports[`renders ./components/menu/demo/vertical.vue correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
</div>
`;

105
components/menu/src/Menu.tsx
View File

@ -1,6 +1,16 @@
import type { Key } from '../../_util/type';
import type { ExtractPropTypes, PropType, VNode } from 'vue';
import { computed, defineComponent, ref, inject, watchEffect, watch, onMounted, unref } from 'vue';
import {
Teleport,
computed,
defineComponent,
ref,
inject,
watchEffect,
watch,
onMounted,
unref,
} from 'vue';
import shallowEqual from '../../_util/shallowequal';
import type { StoreMenuInfo } from './hooks/useMenuContext';
import useProvideMenu, { MenuContextProvider, useProvideFirstLevel } from './hooks/useMenuContext';
@ -421,26 +431,34 @@ export default defineComponent({
const overflowedIndicator = slots.overflowedIndicator?.() || <EllipsisOutlined />;
return (
<>
<Overflow
{...attrs}
onMousedown={props.onMousedown}
prefixCls={`${prefixCls.value}-overflow`}
component="ul"
itemComponent={MenuItem}
class={[className.value, attrs.class]}
role="menu"
id={props.id}
data={wrappedChildList}
renderRawItem={node => node}
renderRawRest={omitItems => {
// We use origin list since wrapped list use context to prevent open
const len = omitItems.length;
<Overflow
{...attrs}
onMousedown={props.onMousedown}
prefixCls={`${prefixCls.value}-overflow`}
component="ul"
itemComponent={MenuItem}
class={[className.value, attrs.class]}
role="menu"
id={props.id}
data={wrappedChildList}
renderRawItem={node => node}
renderRawRest={omitItems => {
// We use origin list since wrapped list use context to prevent open
const len = omitItems.length;
const originOmitItems = len ? childList.slice(-len) : null;
const originOmitItems = len ? childList.slice(-len) : null;
return (
<>
return (
<>
<SubMenu
eventKey={OVERFLOW_KEY}
key={OVERFLOW_KEY}
title={overflowedIndicator}
disabled={allVisible}
internalPopupClose={len === 0}
v-slots={{ default: () => originOmitItems }}
></SubMenu>
<PathContext>
<SubMenu
eventKey={OVERFLOW_KEY}
key={OVERFLOW_KEY}
@ -449,34 +467,27 @@ export default defineComponent({
internalPopupClose={len === 0}
v-slots={{ default: () => originOmitItems }}
></SubMenu>
<PathContext>
<SubMenu
eventKey={OVERFLOW_KEY}
key={OVERFLOW_KEY}
title={overflowedIndicator}
disabled={allVisible}
internalPopupClose={len === 0}
v-slots={{ default: () => originOmitItems }}
></SubMenu>
</PathContext>
</>
);
}}
maxCount={
mergedMode.value !== 'horizontal' || props.disabledOverflow
? Overflow.INVALIDATE
: Overflow.RESPONSIVE
}
ssr="full"
data-menu-list
onVisibleChange={newLastIndex => {
lastVisibleIndex.value = newLastIndex;
}}
/>
<div style={{ display: 'none' }} aria-hidden>
<PathContext>{wrappedChildList}</PathContext>
</div>
</>
</PathContext>
</>
);
}}
maxCount={
mergedMode.value !== 'horizontal' || props.disabledOverflow
? Overflow.INVALIDATE
: Overflow.RESPONSIVE
}
ssr="full"
data-menu-list
onVisibleChange={newLastIndex => {
lastVisibleIndex.value = newLastIndex;
}}
>
<Teleport to="body">
<div style={{ display: 'none' }} aria-hidden>
<PathContext>{wrappedChildList}</PathContext>
</div>
</Teleport>
</Overflow>
);
};
},

14
components/select/__tests__/__snapshots__/demo.test.js.snap
View File

@ -10,6 +10,7 @@ exports[`renders ./components/select/demo/automatic-tokenization.vue correctly 1
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div><span class="ant-select-selection-placeholder">Automatic tokenization</span>
</div>
<!---->
@ -107,6 +108,7 @@ exports[`renders ./components/select/demo/big-data.vue correctly 1`] = `
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div>
<!---->
</div>
@ -174,6 +176,7 @@ exports[`renders ./components/select/demo/hide-selected.vue correctly 1`] = `
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div><span class="ant-select-selection-placeholder">Inserted are removed</span>
</div>
<!---->
@ -204,6 +207,7 @@ exports[`renders ./components/select/demo/multiple.vue correctly 1`] = `
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div>
<!---->
</div>
@ -252,6 +256,7 @@ exports[`renders ./components/select/demo/option-label-prop.vue correctly 1`] =
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div>
<!---->
</div>
@ -271,6 +276,7 @@ exports[`renders ./components/select/demo/option-label-prop.vue correctly 1`] =
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div>
<!---->
</div>
@ -296,6 +302,7 @@ exports[`renders ./components/select/demo/option-label-prop.vue correctly 1`] =
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div>
<!---->
</div>
@ -342,6 +349,7 @@ exports[`renders ./components/select/demo/responsive.vue correctly 1`] = `
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div>
<!---->
</div>
@ -366,6 +374,7 @@ exports[`renders ./components/select/demo/responsive.vue correctly 1`] = `
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1; order: 0;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div>
<!---->
</div>
@ -406,6 +415,7 @@ exports[`renders ./components/select/demo/responsive.vue correctly 1`] = `
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div>
<!---->
</div>
@ -450,6 +460,7 @@ exports[`renders ./components/select/demo/select-users.vue correctly 1`] = `
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div><span class="ant-select-selection-placeholder">Select users</span>
</div>
<!---->
@ -485,6 +496,7 @@ exports[`renders ./components/select/demo/size.vue correctly 1`] = `
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div>
<!---->
</div>
@ -505,6 +517,7 @@ exports[`renders ./components/select/demo/size.vue correctly 1`] = `
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div>
<!---->
</div>
@ -553,6 +566,7 @@ exports[`renders ./components/select/demo/tags.vue correctly 1`] = `
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div><span class="ant-select-selection-placeholder">Tags Mode</span>
</div>
<!---->

7
components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
View File

@ -154,12 +154,9 @@ exports[`Table.rowSelection render with default selection correctly 1`] = `
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
<div style="display: none;" aria-hidden="true">
<!---->
<!---->
<!---->
</div>
</div>
</div>
</div>

5
components/tree-select/__tests__/__snapshots__/demo.test.js.snap
View File

@ -33,6 +33,7 @@ exports[`renders ./components/tree-select/demo/checkable.vue correctly 1`] = `
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div>
<!---->
</div>
@ -53,6 +54,7 @@ exports[`renders ./components/tree-select/demo/custom-tag-render.vue correctly 1
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div>
<!---->
</div>
@ -81,6 +83,7 @@ exports[`renders ./components/tree-select/demo/multiple.vue correctly 1`] = `
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div><span class="ant-select-selection-placeholder">Please select</span>
</div>
<!---->
@ -122,6 +125,7 @@ exports[`renders ./components/tree-select/demo/suffix.vue correctly 1`] = `
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div><span class="ant-select-selection-placeholder">Please select</span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="smile" class="anticon anticon-smile"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span></span>
<!---->
@ -171,6 +175,7 @@ exports[`renders ./components/tree-select/demo/virtual-scroll.vue correctly 1`]
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
<!---->
</div>
<!---->
</div>

3
components/vc-overflow/Overflow.tsx
View File

@ -48,7 +48,7 @@ const Overflow = defineComponent<OverflowProps>({
inheritAttrs: false,
props: overflowProps() as any,
emits: ['visibleChange'],
setup(props, { attrs, emit }) {
setup(props, { attrs, emit, slots }) {
const fullySSR = computed(() => props.ssr === 'full');
const containerWidth = ref<number>(null);
@ -350,6 +350,7 @@ const Overflow = defineComponent<OverflowProps>({
v-slots={{ default: () => suffix }}
></Item>
)}
{slots.default?.()}
</Component>
);
// 使用 disabled 避免结构不一致 导致子组件 rerender