[WebUI] Opening the mobile sidebar focuses the search button and shows the "Search ⌘K" tooltip
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
- Open the WebUI on a phone (iPhone Air, iOS 27), either in mobile Safari or installed as a PWA.
- Tap the sidebar toggle to open the navigation drawer.
- Without touching the search icon, observe the
Search ⌘Ktooltip 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.
The mobile sidebar is rendered inside
SheetContent, a RadixDialogPrimitive.Content(webui/src/App.tsx,Sheet open={mobileSidebarOpen}withclassName="p-0 lg:hidden").webui/src/components/ui/sheet.tsxdoes not overrideonOpenAutoFocus, so the Radix focus scope runs its default behaviour on mount:focusFirst(removeLinks(getTabbableCandidates(container)))(@radix-ui/react-focus-scope).getTabbableCandidatesskips elements withtabindex="-1".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.The search button is rendered through
SidebarActionButtonwith a shortcut, so it is wrapped in a RadixTooltip(webui/src/components/Sidebar.tsx). The trigger's focus handler in@radix-ui/react-tooltipis:onFocus: composeEventHandlers(props.onFocus, () => { if (!isPointerDownRef.current) context.onOpen(); })A programmatic focus has no preceding pointer down, so the tooltip opens.
TooltipContentis placed withside={collapsed ? "right" : "bottom"}. The mobile drawer is expanded (collapsed === false), so the tooltip rendersbottom, 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
SheetContentthe same treatmentwebui/src/components/ui/dialog.tsxalready uses: anonOpenAutoFocusthat callsevent.preventDefault()and focuses the container instead of the first control. Note thatonOpenAutoFocuscurrently exists only indialog.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.
Source: HKUDS/nanobot