el-dropdown menu positions at top-left corner on SvelteKit client-side navigation

[amilcarsilvestre]

When using el-dropdown / el-menu inside a SvelteKit application, the dropdown menu opens at the top-left corner of the viewport (position: absolute; left: 0; top: 0) instead of below the trigger button.

The bug only occurs when the page containing the dropdown is reached via client-side navigation (e.g., clicking a <a href> link with SvelteKit's router). When the same page is server-side rendered (direct URL access or hard reload), the dropdown positions correctly.

Steps to Reproduce

1. Create a SvelteKit application with @tailwindplus/elements installed
2. Create two pages: a home page with a link, and a second page with an el-dropdown component
3. Load the second page directly via URL → dropdown positions correctly ✅
4. Navigate back to the home page, then click the link to the second page (client-side navigation) → click the dropdown trigger → menu appears at the top-left corner ❌

Minimal Reproduction

    <!-- src/routes/entries/+page.svelte -->
    <el-dropdown class="relative inline-block">
      <button type="button">Open menu</button>
      <el-menu
        anchor="bottom end"
        popover
        class="w-44 origin-top-right rounded-md bg-white py-1 shadow-lg ..."
      >
        <button type="button">Option 1</button>
        <button type="button">Option 2</button>
      </el-menu>
    </el-dropdown>

Expected Behavior

The el-menu popover should appear anchored to the bottom-end of the trigger button, regardless of how the page was navigated to.

Actual Behavior

On client-side navigation, the el-menu appears at approximately left: 0; top: 0 (top-left corner of the viewport).

Environment

• Framework: SvelteKit (Svelte 5)
• @tailwindplus/elements version: 1.0.22
• Browser: Chrome (latest)
• Navigation type that fails: SvelteKit client-side routing (goto() / link navigation)
• Navigation type that works: Direct URL / hard reload (SSR)

Analysis

The positioning is computed inside the beforetoggle event handler via floating-ui with strategy: "absolute". On client-side navigation in SvelteKit, the floating-ui computation appears to resolve coordinates as (0, 0), causing the final Object.assign(e.style, { position: "absolute", left: "0px", top: "0px" }) to place the popover at the top-left corner.

A potential workaround of using anchor-strategy="fixed" on the el-menu element has not been confirmed to resolve the issue.

Possible Root Cause

The issue likely relates to a timing or context difference between how the Popover API and floating-ui resolve element geometry when the component is mounted via SvelteKit's client-side navigation vs. a full server-side render. The el-dropdown web component's connectedCallback → queueMicrotask(mount) lifecycle may not have fully established the anchor positioning context by the time the first interaction occurs.

Workaround

None confirmed at this time.

[amilcarsilvestre]

The positioning chain uses floating-ui's computePosition asynchronously. After client-side navigation, by the time the async positioning microtasks resolve, getBoundingClientRect() on the anchor button appears to return incorrect values, causing the menu to be placed at the top-left of the viewport.

Temporary workaround

I worked around this by intercepting the toggle event on el-menu, waiting one animation frame (the menu is still invisible at that point due to the library's own enter transition), and manually positioning the element using getBoundingClientRect() on the trigger button — bypassing the internal floating-ui call entirely.

export function fixMenuPosition(node: Element): { destroy: () => void } { 
    function onToggle(event: Event) { 
        if ((event as ToggleEvent).newState !== 'open') return;
        requestAnimationFrame(() => { 
            const menuEl = node as HTMLElement;
            const dropdown = node.closest('el-dropdown');
            const button = dropdown?.querySelector('button') as HTMLElement | null;
            if (!button) return;
            const btnRect = button.getBoundingClientRect();
            if (!btnRect.width && !btnRect.height) return;
            const gapStr = window.getComputedStyle(menuEl).getPropertyValue('--anchor-gap').trim();
            let gap = 0;
            if (gapStr) { 
                const tmp = document.createElement('span');
                tmp.style.cssText = 'position:fixed;visibility:hidden;height:' + gapStr;
                document.body.appendChild(tmp);
                gap = parseFloat(window.getComputedStyle(tmp).height) || 0;
                document.body.removeChild(tmp);
            } 
            menuEl.style.position = 'fixed';
            menuEl.style.top = `${btnRect.bottom + gap}px`;
            menuEl.style.left = `${btnRect.right - menuEl.offsetWidth}px`;
        });
    } 
    node.addEventListener('toggle', onToggle);
    return { destroy: () => node.removeEventListener('toggle', onToggle) };
} 

Applied as a Svelte action on each el-menu:

<el-menu use:fixMenuPosition anchor="bottom end" popover ...>

This works because the library's enter transition (ke / nextFrame) keeps data-closed on the element for approximately two animation frames after showPopover() is called, so the menu is invisible while we reposition it — no visible flash.