fix: Properly hide separator in Menu when next node is loader/null (#10609)

* fix section rendering separator even after last item in Menu due to loader

* add stories and add width setting to menu async docs

* fix lint

Author: LFDanLu

packages/@react-spectrum/s2/chromatic/Menu.stories.tsx

@@ -20,7 +20,8 @@ import {
 } from '../stories/Menu.stories';
 import {Button} from '../src/Button';
 import {expect} from '@storybook/jest';
-import {Menu, MenuItem, MenuTrigger} from '../src/Menu';
+import {Header, Heading} from '../src/Content';
+import {Menu, MenuItem, MenuSection, MenuTrigger} from '../src/Menu';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import {userEvent, within} from 'storybook/test';
@@ -149,3 +150,68 @@ export const WithLoadMore: Story = {
     await within(menu).findByRole('progressbar', {hidden: true});
   }
 };
+
+export const WithSections: Story = {
+  render: () => (
+    <MenuTrigger>
+      <Button aria-label="Actions">
+        <NewIcon />
+      </Button>
+      <Menu aria-label="Test">
+        <MenuSection>
+          <Header>
+            <Heading>Section 1</Heading>
+          </Header>
+          <MenuItem>Cut</MenuItem>
+          <MenuItem>Copy</MenuItem>
+        </MenuSection>
+        <MenuSection>
+          <Header>
+            <Heading>Section 2</Heading>
+          </Header>
+          <MenuItem>Paste</MenuItem>
+          <MenuItem>Delete</MenuItem>
+        </MenuSection>
+      </Menu>
+    </MenuTrigger>
+  ),
+  play: async ({canvasElement}) => {
+    await userEvent.tab();
+    await userEvent.keyboard('{ArrowDown}');
+    let body = canvasElement.ownerDocument.body;
+    await within(body).findByRole('menu');
+  }
+};
+
+export const WithSectionsAndLoadMore: Story = {
+  render: () => (
+    <MenuTrigger>
+      <Button aria-label="Actions">
+        <NewIcon />
+      </Button>
+      <Menu aria-label="Test" loadingState="loadingMore">
+        <MenuSection>
+          <Header>
+            <Heading>Section 1</Heading>
+          </Header>
+          <MenuItem>Cut</MenuItem>
+          <MenuItem>Copy</MenuItem>
+        </MenuSection>
+        <MenuSection>
+          <Header>
+            <Heading>Section 2</Heading>
+          </Header>
+          <MenuItem>Paste</MenuItem>
+          <MenuItem>Delete</MenuItem>
+        </MenuSection>
+      </Menu>
+    </MenuTrigger>
+  ),
+  play: async ({canvasElement}) => {
+    await userEvent.tab();
+    await userEvent.keyboard('{ArrowDown}');
+    let body = canvasElement.ownerDocument.body;
+    let menu = await within(body).findByRole('menu');
+    await within(menu).findByRole('progressbar', {hidden: true});
+  }
+};

packages/@react-spectrum/s2/src/ComboBox.tsx

@@ -35,7 +35,6 @@ import {
   SpectrumLabelableProps
 } from '@react-types/shared';
 import {AvatarContext} from './Avatar';
-import {BaseCollection, CollectionNode} from 'react-aria/private/collections/BaseCollection';
 import {baseColor, centerPadding, focusRing, space, style} from '../style' with {type: 'macro'};
 import {Button, ButtonRenderProps} from 'react-aria-components/Button';
 import {centerBaseline} from './CenterBaseline';
@@ -86,6 +85,7 @@ import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon';
 import {InputContext, InputProps} from 'react-aria-components/Input';
 import intlMessages from '../intl/*.json';
+import {isSeparatorHidden, SeparatorNode} from './separator-utils';
 import {ListLayout} from 'react-stately/useVirtualizerState';
 import {mergeRefs} from 'react-aria/mergeRefs';
 import {Node} from '@react-types/shared';
@@ -822,24 +822,6 @@ const ComboboxInner = forwardRef(function ComboboxInner(
   );
 });
 
-class SeparatorNode extends CollectionNode<any> {
-  static readonly type = 'separator';
-
-  filter(
-    collection: BaseCollection<any>,
-    newCollection: BaseCollection<any>
-  ): CollectionNode<any> | null {
-    let prevItem = newCollection.getItem(this.prevKey!);
-    if (prevItem && prevItem.type !== 'separator') {
-      let clone = this.clone();
-      newCollection.addDescendants(clone, collection);
-      return clone;
-    }
-
-    return null;
-  }
-}
-
 export const Divider = /*#__PURE__*/ createLeafComponent(
   SeparatorNode,
   function Divider(
@@ -849,13 +831,7 @@ export const Divider = /*#__PURE__*/ createLeafComponent(
   ) {
     let listState = useContext(ListStateContext)!;
 
-    let nextNode = node.nextKey != null && listState.collection.getItem(node.nextKey);
-    if (
-      node.prevKey == null ||
-      !nextNode ||
-      nextNode.type === 'separator' ||
-      (nextNode.type === 'loader' && nextNode.nextKey == null)
-    ) {
+    if (isSeparatorHidden(node, listState.collection)) {
       return null;
     }
 

packages/@react-spectrum/s2/src/Menu.tsx

@@ -23,14 +23,16 @@ import {
   MenuTriggerProps as AriaMenuTriggerProps,
   SubmenuTrigger as AriaSubmenuTrigger,
   SubmenuTriggerProps as AriaSubmenuTriggerProps,
-  MenuItemRenderProps
+  MenuItemRenderProps,
+  MenuStateContext
 } from 'react-aria-components/Menu';
 import {
   AsyncLoadable,
   DOMRef,
   DOMRefValue,
   GlobalDOMAttributes,
   LoadingState,
+  Node,
   PressEvent
 } from '@react-types/shared';
 import {
@@ -57,6 +59,7 @@ import {
 } from './style-utils' with {type: 'macro'};
 import {
   createContext,
+  ForwardedRef,
   forwardRef,
   JSX,
   ReactElement,
@@ -65,6 +68,7 @@ import {
   useRef,
   useState
 } from 'react';
+import {createLeafComponent} from 'react-aria/CollectionBuilder';
 import {divider} from './Divider';
 import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};
 import {forwardRefType} from './types';
@@ -74,6 +78,7 @@ import {ImageContext} from './Image';
 import InfoCircleIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg'; // chevron right removed??
 import {InPopoverContext, Popover, PopoverContext} from './Popover';
 import intlMessages from '../intl/*.json';
+import {isSeparatorHidden, SeparatorNode} from './separator-utils';
 import LinkOutIcon from '../ui-icons/LinkOut';
 import {mergeStyles} from '../style/runtime';
 import {Placement} from 'react-aria/useOverlayPosition';
@@ -585,29 +590,35 @@ export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T
   return content;
 });
 
-export function Divider(props: SeparatorProps): ReactNode {
-  return (
-    <Separator
-      {...props}
-      className={mergeStyles(
-        divider({
-          size: 'M',
-          orientation: 'horizontal',
-          isStaticColor: false
-        }),
-        style({
-          display: {
-            default: 'grid',
-            ':last-child': 'none'
-          },
-          gridColumnStart: 2,
-          gridColumnEnd: -2,
-          marginY: size(5) // height of the menu separator is 12px, and the divider is 2px
-        })
-      )}
-    />
-  );
-}
+export const Divider = /*#__PURE__*/ createLeafComponent(
+  SeparatorNode,
+  function Divider(props: SeparatorProps, ref: ForwardedRef<HTMLElement>, node: Node<unknown>) {
+    let state = useContext(MenuStateContext)!;
+
+    if (isSeparatorHidden(node, state.collection)) {
+      return null;
+    }
+
+    return (
+      <Separator
+        {...props}
+        ref={ref}
+        className={mergeStyles(
+          divider({
+            size: 'M',
+            orientation: 'horizontal',
+            isStaticColor: false
+          }),
+          style({
+            gridColumnStart: 2,
+            gridColumnEnd: -2,
+            marginY: size(5) // height of the menu separator is 12px, and the divider is 2px
+          })
+        )}
+      />
+    );
+  }
+);
 
 export interface MenuSectionProps<T> extends Omit<
   AriaMenuSectionProps<T>,

packages/@react-spectrum/s2/src/separator-utils.ts

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {BaseCollection, CollectionNode} from 'react-aria/private/collections/BaseCollection';
+import {Collection, Node} from '@react-types/shared';
+
+export class SeparatorNode extends CollectionNode<any> {
+  static readonly type = 'separator';
+
+  filter(
+    collection: BaseCollection<any>,
+    newCollection: BaseCollection<any>
+  ): CollectionNode<any> | null {
+    let prevItem = newCollection.getItem(this.prevKey!);
+    if (prevItem && prevItem.type !== 'separator') {
+      let clone = this.clone();
+      newCollection.addDescendants(clone, collection);
+      return clone;
+    }
+
+    return null;
+  }
+}
+
+// given a collection check if the separator should be hidden if the next node is a loader or is end of list/menu
+export function isSeparatorHidden(
+  node: Node<unknown>,
+  collection: Collection<Node<unknown>>
+): boolean {
+  let nextNode = node.nextKey != null && collection.getItem(node.nextKey);
+  return (
+    node.prevKey == null ||
+    !nextNode ||
+    nextNode.type === 'separator' ||
+    (nextNode.type === 'loader' && nextNode.nextKey == null)
+  );
+}

packages/dev/s2-docs/pages/s2/Menu.mdx

@@ -292,6 +292,7 @@ Use the `loadingState` and `onLoadMore` props to enable async loading and infini
 import {MenuTrigger, Menu, MenuItem} from '@react-spectrum/s2/Menu';
 import {ActionButton} from '@react-spectrum/s2/ActionButton';
 import {useAsyncList} from '@react-spectrum/s2/useAsyncList';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 interface Character {
   name: string
@@ -318,6 +319,7 @@ function Example() {
     <MenuTrigger>
       <ActionButton>Select Character</ActionButton>
       <Menu
+        styles={style({width: 150})}
         aria-label="Star Wars Characters"
         items={list.items}
         /*- begin highlight -*/