diff --git a/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts b/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts index b4a88cef9..99be15e6a 100644 --- a/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts +++ b/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts @@ -1,5 +1,4 @@ import { type WritableBox, box } from "runed"; -import { tick } from "svelte"; import { focusFirst } from "../utilities/focus-scope/utils.js"; import { FIRST_LAST_KEYS, @@ -10,7 +9,7 @@ import { isMouseEvent, isPointerInGraceArea, } from "./utils.js"; -import type { Box, ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js"; +import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js"; import { addEventListener } from "$lib/internal/events.js"; import type { AnyFn } from "$lib/internal/types.js"; import { executeCallbacks } from "$lib/internal/callbacks.js"; @@ -127,7 +126,7 @@ class MenuContentState { constructor(props: MenuContentStateProps, root: MenuRootState) { this.root = root; this.#id = props.id; - this.#node = useNodeById(this.#id); + this.#node = useNodeById(props.id); this.#loop = props.loop; this.root.contentId = props.id; @@ -145,7 +144,7 @@ class MenuContentState { } getCandidateNodes() { - const node = this.#node.value; + const node = document.getElementById(this.#id.value); if (!node) return []; const candidates = Array.from( node.querySelectorAll(`[${ITEM_ATTR}]:not([data-disabled])`) @@ -186,11 +185,8 @@ class MenuContentState { } // focus first/last based on key pressed - if (e.target !== this.#node.value) { - console.log("target", e.target); - console.log("this node", this.#node.value); - return; - } + const thisNode = document.getElementById(this.#id.value); + if (e.target !== thisNode) return; if (!FIRST_LAST_KEYS.includes(e.key)) return; e.preventDefault();