Home Search Pricing Get inErrata About

Sign in Sign up

Graph/focus-loss-overlay-event-blocking

Pattern

Focus Lost in Overlays

focus-loss-overlay-event-blocking

Dropdowns, tooltips, and sheets inside modals lose or misroute focus because click/key events are blocked or re-rendered, and because aria-hidden/z-index/portal stacking leaves a focused element in hidden UI.

Node Details

Public graph metadata

Updated7/24/2026

Connections

30 linked nodes

Pointer/mouse handlers in a React + PIXI canvas use stale Zustand state, causing dragging/editing of sequence points to behave incorrectly. The issue persists when state is modified during mouse up, and recreating handlers inside effects/updates prevents some but not all bugs (e.g., cannot drag twice).

Clicking a shadcn/ui `DropdownMenu` trigger inside a `Sheet` throws an accessibility console error: “Blocked aria-hidden on an element because its descendant retained focus.”

I am not able to click on the Input and type anything — I have a Command Input inside the Popover for MultiSelect. Tension: It treats the CommandInput as if its not even there. Outcome: pointer-events-auto and did a console.log when clicked on CommandInput so it was printing but still I am not able to type in the Input and search.

Dropdown only opens after typing into the input

In iOS Safari, opening the ShadCN Drawer and focusing an input causes the drawer height to shrink and not behave correctly when the keyboard opens.

The ShadCN `Command` component inside Lexical’s `TypeaheadMenuPlugin` does not receive programmatic focus when attempting to call `focus()` in a `useEffect` after render.

The shadcn/Radix navigation menu centers its content around the trigger, so when the viewport content is wider than the browser window it overflows and can push outside the viewport. The user wants automatic detection of overflow and shifting the menu content to the right to avoid overflow.

Using multiple shadcn `Toggle` components to implement a single-select stroke toggle set does not reliably keep only one toggle active and visually in sync with React state.

When using the shadcn Calendar inside a modal form, the calendar popover appears but immediately dismisses when clicking a date (and year/month selection is also impossible). The chosen date does not populate the input or update react-hook-form state.

clicking outside dropdown menu. Tension: it triggers the tooltip again, incorrectly. Outcome: Update your `DropdownMenuContent` as below:.

A shadcn Select shows an unwanted black border (focus ring) when the dropdown is open and the cursor is inside the selected text, even after removing the usual top/left/right borders.

making it impossible to interact with the dropdown items from tagify. Tension: hadcn is completely disabling interaction with elements outside the dialog and its content.

one of the use cases has a large amount of instances, provoking a very slow experience — implement a dropdown with `react-aria-components`. Tension: I want to use a row virtualization library. I tried with two (`react-window` and `@tanstack/react-virtual`) but in both cases it seems to be an issue with the popdown.

When using shadcn/ui Tooltips inside a table with sticky header (thead/th) and sticky first column cells (tbody/td), tooltip content becomes hidden behind sticky elements due to z-index stacking.

Clicking a Tailwind navbar item with nested sub-menus doesn’t correctly open/close the dropdowns, causing multiple menus to remain visible or incorrect menus to be toggled.

In Firefox, Tailwind’s default focus ring (blue outline) overrides attempts to customize the focus ring color, resulting in the ring reverting to the default color even when custom utilities are applied.

In a React dropdown list of up to 3 suggestion items, the user needs to move keyboard focus up/down using arrow keys. Using refs instead of document.getElementById, the focus management is difficult because each list item is conditionally rendered.

When the MUI Select dropdown is used inside an iframe, selecting any option causes the viewport to soft scroll to the top of the form.

Clickable components don't show a pointer cursor in certain areas while onClick still works

Clicking the tabs does not switch the rendered page content; the component remains stuck on the overview view even after selecting other tabs.

Dash callbacks need to run only when a user changes the value of a dcc.Dropdown, not when other callbacks update the prop. The initial attempt to detect changes using click/keyboard events fails to detect when the user clears the dropdown selection via the remove (x) icon.

PrimeReact Dropdown search/filter does not work inside a Bootstrap modal because clicking the input immediately loses focus, preventing typing. The dropdown still opens, but the filter text field cannot be used.

Custom CSS/styling for the MUI Charts popover/tooltip is not applying when using the documented class selectors or `slotProps` styles. Developers cannot find reliable guidance on how to target the tooltip element.

Clicking a shadcn dropdown menu causes the button to shift horizontally and the browser horizontal scrollbar to disappear.

Newly added UI elements always appear at the top of the window and ignore attempts to change their positions, preventing the intended inline button layout.

developers don't know how to trigger re-renders, bind CSS classes dynamically, or structure the component lifecycle — In s&box, building HUD and menu UI requires Razor components (PanelComponent), not Unity-style OnGUI or uGUI. Tension: BuildHash() is the key re-render trigger that many miss.

Keyboard movement still reaches PlayerController, but mouse look and click actions fail. — In sbox, a hidden full-screen ScreenPanel with pointer events enabled can keep Mouse.Visibility Auto in UI mode. Tension: Keyboard movement still reaches PlayerController, but mouse look and click actions fail. Outcome: Separate menu and in-game pointer capture modes fix it.

A full-screen loading overlay using `fixed inset-0` covered the entire viewport — including the fixed sidebar/navbar. Tension: making it inaccessible during loading. Outcome: The desired behavior was for the overlay to cover only the main content area while leaving the sidebar interactive.

visible flicker, collapses expanded UI sections, and loses scroll positions — Dashboard with SSE-driven updates (session cards, alert panels).

severe performance issues — rendering large scrollable lists (inventory, leaderboards, server browsers) with hundreds of items using regular panel children. Tension: all panels are created and rendered even when off-screen.

[inerrata]Tags Knowledge Graph Docs About Team Pricing Contact Report a Bug Privacy Terms Cookie Settings Do Not Sell or Share My Info

© 2026 Inerrata