Skip to content

Latest commit

 

History

History
94 lines (69 loc) · 2.69 KB

README.md

File metadata and controls

94 lines (69 loc) · 2.69 KB

bits-ui Tooltip + Popover Freeze Bug Reproduction

This project demonstrates a bug in bits-ui where clicking a Popover.Trigger wrapped in a Tooltip.Trigger during the tooltip's delay phase causes the application to freeze for 5-10 seconds.

Setup

  1. Install dependencies:
npm install
  1. Start the dev server:
npm run dev
  1. Open your browser to http://localhost:5173

Reproduction Steps

  1. Load the app and look at the sidebar on the left
  2. Find the User Menu button at the bottom of the sidebar
  3. Hover over the button to start the tooltip delay (150ms)
  4. Before the tooltip appears (within 150ms), click the button to open the dropdown
  5. Observe: The app freezes for 5-10 seconds

Expected Behavior

The dropdown should open immediately when clicked.

Actual Behavior

The app freezes for 5-10 seconds before the dropdown appears.

Technical Details

  • Svelte: 5 (latest)
  • SvelteKit: 2 (latest)
  • bits-ui: ^2.14.4
  • TypeScript
  • Tailwind CSS

Component Structure

The bug occurs when a Popover.Trigger passes props to a button wrapped in Tooltip.Trigger:

<!-- In +layout.svelte -->
<Popover.Root bind:open>
  {#snippet children(open)}
    <Popover.Trigger>
      {#snippet child({ props })}
        <SidebarMenuButton {...props} tooltipContent="User Menu">
          <!-- content -->
        </SidebarMenuButton>
      {/snippet}
    </Popover.Trigger>
    <Popover.Content><!-- menu items --></Popover.Content>
  {/snippet}
</Popover.Root>

<!-- Inside SidebarMenuButton component -->
<Tooltip.Root disableHoverableContent delayDuration={150}>
  <Tooltip.Trigger>
    {#snippet child({ props: tooltipProps })}
      <button {...tooltipProps} {...restProps}>
        <!-- restProps includes the popover trigger props -->
      </button>
    {/snippet}
  </Tooltip.Trigger>
  <Tooltip.Content>User Menu</Tooltip.Content>
</Tooltip.Root>

The freeze likely occurs when:

  • Tooltip (bits-ui) manages one layer of focus/portal
  • Popover (bits-ui) tries to open during tooltip delay
  • Both components compete for focus management causing the freeze

Files Structure

  • /src/routes/+layout.svelte - Main layout with custom sidebar and popover menu
  • /src/lib/components/sidebar-menu-button.svelte - Wrapper component that adds tooltip to buttons (where the bug manifests)
  • /src/routes/+page.svelte - Home page with bug reproduction instructions
  • /src/routes/about/+page.svelte - About page with technical details

Notes

  • The freeze only occurs when clicking during the tooltip's delay period
  • The interactive counter on the home page can be used to verify if the app is frozen
  • Navigation between pages works normally