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]: fix `menu-item-group` not rendering in SSR (#7349) 

* docs: updating the `dropdownRender` description and jumps in the FAQ for Select

* fix: `menu-item-group` rendered in ssr
pull/7514/head
Carl Chen 2024-04-19 19:18:30 +08:00 committed by GitHub
parent c25736d57d
commit a8c72fc5e7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -439,15 +439,17 @@ export default defineComponent({
forceSubMenuRender: computed(() => props.forceSubMenuRender), forceSubMenuRender: computed(() => props.forceSubMenuRender),
rootClassName: hashId, rootClassName: hashId,
}); });
const getChildrenList = () => itemsNodes.value || flattenChildren(slots.default?.());
return () => { return () => {
const childList = itemsNodes.value || flattenChildren(slots.default?.()); const childList = getChildrenList();
const allVisible = const allVisible =
lastVisibleIndex.value >= childList.length - 1 || lastVisibleIndex.value >= childList.length - 1 ||
mergedMode.value !== 'horizontal' || mergedMode.value !== 'horizontal' ||
props.disabledOverflow; props.disabledOverflow;
// >>>>> Children // >>>>> Children
const wrappedChildList = const getWrapperList = childList => {
mergedMode.value !== 'horizontal' || props.disabledOverflow return mergedMode.value !== 'horizontal' || props.disabledOverflow
? childList ? childList
: // Need wrap for overflow dropdown that do not response for open : // Need wrap for overflow dropdown that do not response for open
childList.map((child, index) => ( childList.map((child, index) => (
@ -458,6 +460,7 @@ export default defineComponent({
v-slots={{ default: () => child }} v-slots={{ default: () => child }}
></MenuContextProvider> ></MenuContextProvider>
)); ));
};
const overflowedIndicator = slots.overflowedIndicator?.() || <EllipsisOutlined />; const overflowedIndicator = slots.overflowedIndicator?.() || <EllipsisOutlined />;
return wrapSSR( return wrapSSR(
@ -470,7 +473,7 @@ export default defineComponent({
class={[className.value, attrs.class, hashId.value]} class={[className.value, attrs.class, hashId.value]}
role="menu" role="menu"
id={props.id} id={props.id}
data={wrappedChildList} data={getWrapperList(childList)}
renderRawItem={node => node} renderRawItem={node => node}
renderRawRest={omitItems => { renderRawRest={omitItems => {
// We use origin list since wrapped list use context to prevent open // We use origin list since wrapped list use context to prevent open
@ -514,7 +517,7 @@ export default defineComponent({
> >
<Teleport to="body"> <Teleport to="body">
<div style={{ display: 'none' }} aria-hidden> <div style={{ display: 'none' }} aria-hidden>
<PathContext>{wrappedChildList}</PathContext> <PathContext>{getWrapperList(getChildrenList())}</PathContext>
</div> </div>
</Teleport> </Teleport>
</Overflow>, </Overflow>,