Skip to content

Commit d75ba60

Browse files
authored
Fix RAC submenu flipping (#5808)
* fix submenu flip positioning we need to wait til the collection is computed, otherwise the overlay has a height of 0 and we get an inaccurate position due to a premature max height being applied * updating the container padding for the submenu in RAC if we let the default of 12 get applied, the positioning is slightly strange when submenu trigger is at the bottom of the boundary * clear the max height on the overlay so we always get a proper position calculation on every render * forgot to reset some changes * adding a comment for posterity * revert containerPadding set
1 parent ef44855 commit d75ba60

File tree

2 files changed

+9
-3
lines changed

2 files changed

+9
-3
lines changed

packages/@react-aria/overlays/src/useOverlayPosition.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,12 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
143143
return;
144144
}
145145

146+
// Always reset the overlay's previous max height if not defined by the user so that we can compensate for
147+
// RAC collections populating after a second render and properly set a correct max height + positioning when it populates.
148+
if (!maxHeight && overlayRef.current) {
149+
(overlayRef.current as HTMLElement).style.maxHeight = 'none';
150+
}
151+
146152
let position = calculatePosition({
147153
placement: translateRTL(placement, direction),
148154
overlayNode: overlayRef.current,

packages/react-aria-components/src/Menu.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export interface SubmenuTriggerProps {
9292

9393
/**
9494
* A submenu trigger is used to wrap a submenu's trigger item and the submenu itself.
95-
*
95+
*
9696
* @version alpha
9797
*/
9898
export function SubmenuTrigger(props: SubmenuTriggerProps, ref: ForwardedRef<HTMLDivElement>): JSX.Element | null {
@@ -247,13 +247,13 @@ function MenuSection<T>({section, className, style, ...otherProps}: MenuSectionP
247247
export interface MenuItemRenderProps extends ItemRenderProps {
248248
/**
249249
* Whether the item has a submenu.
250-
*
250+
*
251251
* @selector [data-has-submenu]
252252
*/
253253
hasSubmenu: boolean,
254254
/**
255255
* Whether the item's submenu is open.
256-
*
256+
*
257257
* @selector [data-open]
258258
*/
259259
isOpen: boolean

0 commit comments

Comments
 (0)