#5770·nanobot

[WebUI] Opening the mobile sidebar focuses the search button and shows the "Search ⌘K" tooltip

Author: morandotCreated Sep 15, 2026Updated Sep 15, 2026

Bug Description

On a phone, opening the sidebar immediately renders a white pill labelled Search ⌘K below the magnifier icon, without the user touching that button. On a touch device there is no hover state, so this reads as a search box popping up by default. The pill stays on screen until the user taps somewhere else.

Steps to Reproduce

  1. Open the WebUI on a phone (iPhone Air, iOS 27), either in mobile Safari or installed as a PWA.
  2. Tap the sidebar toggle to open the navigation drawer.
  3. Without touching the search icon, observe the Search ⌘K tooltip appear below it.

Expected Behavior

Opening the drawer should show only the drawer. Tooltips should not be triggered by touch, and a keyboard-shortcut hint (⌘K) is meaningless on a touch device.

Root Cause

The drawer autofocuses the search button, and that button opens its tooltip on focus.

  1. The mobile sidebar is rendered inside SheetContent, a Radix DialogPrimitive.Content (webui/src/App.tsx, Sheet open={mobileSidebarOpen} with className="p-0 lg:hidden").

  2. webui/src/components/ui/sheet.tsx does not override onOpenAutoFocus, so the Radix focus scope runs its default behaviour on mount: focusFirst(removeLinks(getTabbableCandidates(container))) (@radix-ui/react-focus-scope). getTabbableCandidates skips elements with tabindex="-1".

  3. The first element inside the drawer is the brand mark button, which is explicitly tabIndex={-1} while the sidebar is expanded (webui/src/components/Sidebar.tsx, sidebar-brand-mark), so it is skipped. The next tabbable element is the search button, which is therefore focused when the drawer opens.

  4. The search button is rendered through SidebarActionButton with a shortcut, so it is wrapped in a Radix Tooltip (webui/src/components/Sidebar.tsx). The trigger's focus handler in @radix-ui/react-tooltip is:

    onFocus: composeEventHandlers(props.onFocus, () => {
      if (!isPointerDownRef.current) context.onOpen();
    })
    

    A programmatic focus has no preceding pointer down, so the tooltip opens.

  5. TooltipContent is placed with side={collapsed ? "right" : "bottom"}. The mobile drawer is expanded (collapsed === false), so the tooltip renders bottom, which is where it is observed. It closes only on blur or click, so it remains visible until the user interacts elsewhere.

Additional Context

Client: iPhone Air, iOS 27. A screenshot is available and can be attached on request.

Possible directions for a fix:

  • Give SheetContent the same treatment webui/src/components/ui/dialog.tsx already uses: an onOpenAutoFocus that calls event.preventDefault() and focuses the container instead of the first control. Note that onOpenAutoFocus currently exists only in dialog.tsx.
  • Suppress sidebar tooltips on touch devices altogether. The same trigger applies to the new-chat and collapse buttons, which are also wrapped in Tooltip.
  • At minimum, do not open a tooltip on focus that was not preceded by pointer interaction on a coarse pointer.

Possibly related: #4479 (PWA support and mobile swipe gesture for sidebar), which also touches the mobile sidebar layer.