fix(navigation-menu): incorrect animation after closed

kobaltedev · Aug 26, 2024 · b6f81ac · b6f81ac
1 parent 7b26d59
commit b6f81ac
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 2 deletions.
diff --git a/packages/core/src/menu/menu-content-base.tsx b/packages/core/src/menu/menu-content-base.tsx
@@ -290,6 +290,8 @@ export function MenuContentBase<T extends ValidComponent = "div">(
 
 	createEffect(() => onCleanup(context.registerContentId(local.id!)));
 
+	onCleanup(() => context.setContentRef(undefined));
+
 	const commonAttributes: Omit<MenuContentBaseRenderProps, keyof MenuDataSet> =
 		{
 			ref: mergeRefs((el) => {

diff --git a/packages/core/src/menu/menu-context.tsx b/packages/core/src/menu/menu-context.tsx
@@ -25,7 +25,7 @@ export interface MenuContextValue {
 	triggerId: Accessor<string | undefined>;
 	contentId: Accessor<string | undefined>;
 	setTriggerRef: (el: HTMLElement) => void;
-	setContentRef: (el: HTMLElement) => void;
+	setContentRef: (el: HTMLElement | undefined) => void;
 	open: (focusStrategy: FocusStrategy | boolean) => void;
 	close: (recursively?: boolean) => void;
 	toggle: (focusStrategy: FocusStrategy | boolean) => void;

diff --git a/packages/core/src/navigation-menu/navigation-menu-root.tsx b/packages/core/src/navigation-menu/navigation-menu-root.tsx
@@ -168,6 +168,12 @@ export function NavigationMenuRoot<T extends ValidComponent = "ul">(
 		element: () => viewportRef() ?? null,
 	});
 
+	createEffect(() => {
+		if (!viewportPresent()) {
+			context.setPreviousMenu(undefined);
+		}
+	});
+
 	const context: NavigationMenuContextValue = {
 		dataset,
 		delayDuration: () => local.delayDuration!,

diff --git a/packages/core/src/navigation-menu/navigation-menu-trigger.tsx b/packages/core/src/navigation-menu/navigation-menu-trigger.tsx
@@ -69,8 +69,10 @@ export function NavigationMenuTrigger<T extends ValidComponent = "button">(
 		if (context.dataset()["data-expanded"] === "") return;
 
 		timeoutId = window.setTimeout(() => {
-			context.setAutoFocusMenu(true);
 			menuContext?.triggerRef()?.focus();
+			setTimeout(() => {
+				context.setAutoFocusMenu(true);
+			});
 		}, context.delayDuration());
 	};
 

diff --git a/packages/core/src/navigation-menu/navigation-menu-viewport.tsx b/packages/core/src/navigation-menu/navigation-menu-viewport.tsx
@@ -117,10 +117,12 @@ export function NavigationMenuViewport<T extends ValidComponent = "li">(
 	);
 
 	const height = createMemo((prev) => {
+		if (ref() === undefined || !context.viewportPresent()) return undefined;
 		if (size.height() === 0) return prev;
 		return size.height();
 	});
 	const width = createMemo((prev) => {
+		if (ref() === undefined || !context.viewportPresent()) return undefined;
 		if (size.width() === 0) return prev;
 		return size.width();
 	});