next: fix nav menu focus (#681)

huntabyte · Sep 27, 2024 · a4a3ec6 · a4a3ec6
1 parent b8f256c
commit a4a3ec6
Show file tree

Hide file tree

Showing 11 changed files with 134 additions and 55 deletions.
diff --git a/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts b/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts
@@ -54,7 +54,7 @@ class AccordionBaseState {
 		this.#loop = props.loop;
 		this.rovingFocusGroup = useRovingFocus({
 			rootNodeId: this.#id,
-			candidateSelector: ACCORDION_TRIGGER_ATTR,
+			candidateAttr: ACCORDION_TRIGGER_ATTR,
 			loop: this.#loop,
 			orientation: this.orientation,
 		});

diff --git a/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts b/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts
@@ -266,7 +266,7 @@ class MenuContentState {
 		this.#handleTypeaheadSearch = useTypeahead().handleTypeaheadSearch;
 		this.rovingFocusGroup = useRovingFocus({
 			rootNodeId: this.parentMenu.contentId,
-			candidateSelector: this.parentMenu.root.attrs.item,
+			candidateAttr: this.parentMenu.root.attrs.item,
 			loop: this.#loop,
 			orientation: box.with(() => "vertical"),
 		});

diff --git a/packages/bits-ui/src/lib/bits/menubar/menubar.svelte.ts b/packages/bits-ui/src/lib/bits/menubar/menubar.svelte.ts
@@ -51,7 +51,7 @@ class MenubarRootState {
 		});
 		this.rovingFocusGroup = useRovingFocus({
 			rootNodeId: this.id,
-			candidateSelector: TRIGGER_ATTR,
+			candidateAttr: TRIGGER_ATTR,
 			loop: this.loop,
 			orientation: box.with(() => "horizontal"),
 			currentTabStopId: this.currentTabStopId,

diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-item.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-item.svelte
@@ -8,14 +8,18 @@
 	let {
 		id = useId(),
 		value = useId(),
+		ref = $bindable(null),
 		child,
 		children,
-		ref = $bindable(),
 		...restProps
 	}: ItemProps = $props();
 
 	const itemState = useNavigationMenuItem({
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 		value: box.with(() => value),
 	});
 

diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-link.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-link.svelte
@@ -8,7 +8,7 @@
 
 	let {
 		id = useId(),
-		ref = $bindable(),
+		ref = $bindable(null),
 		child,
 		children,
 		active = false,
@@ -18,6 +18,10 @@
 
 	const linkState = useNavigationMenuLink({
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 		active: box.with(() => active),
 		onSelect: box.with(() => onSelect),
 	});