Home Search Pricing Get inErrata About

Sign in Sign up

Graph/portal-stacking-context-focus-desync

AntiPattern

Staking Context Focus Breakage

portal-stacking-context-focus-desync

Floating UI (Radix/Lexical portals, dropdowns, tooltips) ends up in the wrong DOM stacking context or focus lifecycle, so z-index/aria-hidden/refs desynchronize and users lose interaction, keyboard focus, or see overlays render above/below headers.

Node Details

Public graph metadata

Updated7/15/2026

Connections

30 linked nodes

MATCHESSolution

Control the dropdown’s open state and explicitly close the `DropdownMenu` (e.g., via an `openMenu` state) before opening/navigating to the next UI so focus is moved and no focused descendant remains when `aria-hidden` is applied.

MATCHESSolution

We can temporarily fix this by overriding the behavior using css. — html body[data-scroll-locked]. Tension: the automatic scroll lock when opening a menu. Outcome: overflow: visible !important; margin-right: 0 !important;.

MATCHESSolution

Update Vaul to the latest version and ensure the drawer input container uses an overflow scrolling behavior (e.g., add className="overflow-auto" to the container, possibly removing/avoiding ScrollArea if not needed).

MATCHESSolution

Defer the focus call until after the menu finishes mounting (e.g., wrap `commandRef.current.focus()` in a small `setTimeout`/microtask). If needed, also set selection state on the relevant item before focusing.

MATCHESSolution

Modify the shadcn NavigationMenuViewport styling/positioning logic (as shown by adjusting the NavigationMenuViewport component) so the viewport is aligned differently—e.g., not always centered—thereby preventing overflow when the expanded content is too wide.

MATCHESSolution

Override the styling so the option items allow pointer events (e.g., add `className="pointer-events-auto"` to `CommandItem`, or remove/adjust the `pointer-events-none` rule affecting enabled items).

MATCHESSolution

Tension: prevents you from interact with other elements. Outcome: working playground: https://stackblitz.com/edit/stackblitz-starters-gl6ghw?description=The%20React%20framework%20for%20production&file=app%2Fpage.tsx,app%2Fglobals.css&title=Next.js%20Starter.

MATCHESSolution

prevent shifting the focus back to trigger button — while we are closing `DropdownMenu` with outer click. Tension: tooltip again, incorrectly. Outcome: e.preventDefault().

MATCHESSolution

Handle Radix Popover’s onOpenAutoFocus (or equivalent) and call event.preventDefault() to prevent the Popover from stealing focus from the Input when it opens.

MATCHESSolution

Need to change few things in Nav components as follows — Nav components. Tension: We need to spread the props. Outcome: For more details please check Radix docs.

MATCHESSolution

Neither `ring-0` works, nor even `outline-none` — I am using a custom Tailwind button from Shadcn-UI in my React component. Tension: I am struggling to prevent the ugly ring that appears around the button when it comes in focus. Outcome: Even inline style as below (with `!important`, no less!), which I don’t want to depend on anyway, failed to do the job.

MATCHESSolution

Rework the app to be HTML-first and framework-agnostic by using an HTML-rendered shadcn/ui implementation (e.g., franken-ui) that works with Tailwind, then use HTMX to request and swap HTML partials from the server to replace client-side JS behavior.

MATCHESSolution

Use a global or local state to control the DnD UI, then sync that state with React Query data and update the server on drag end

MATCHESSolution

rendering the rows as a non complex component like a spinner or something — my laggy components were loading in as i scrolled etc. Tension: excessive blanking of the page. Outcome: using useEffect to determine if it is fully rendered, you can resolve most of the major blanking issues.

MATCHESSolution

Render the tooltip Content inside a Radix Portal (wrap the Tooltip content in a Portal) so it mounts above the sticky elements and remains visible.

MATCHESSolution

You could look at increasing the `z-index` of the cell when it is hovered — when the tooltip shows. Tension: you will still get some janky behavior. Outcome: consider using Portals to render the tooltip element outside the table.

MATCHESSolution

You'll need to put focus on an input element — in order to use the clipboard APIs. Tension: this is prevented in the browsers for security purposes. Outcome: focus on an input element in order to use the clipboard APIs.

MATCHESSolution

A perfect use case for anchor positioning even if the support is still not good — section:after { content: ""; position: absolute; height: 2px; background-color: red;. Outcome: inset: auto anchor(--C right) anchor(--B bottom) anchor(--A left);.

MATCHESSolution

Increase the specificity of the sx styles (e.g., by wrapping style rules with '&&') so they override Material UI's outlined defaults and the border color becomes visible.

MATCHESSolution

Ensure the Sonner <Toaster> is rendered at a higher level (e.g., above children/layout so it mounts before any toast calls). If needed, dynamically load the component with SSR disabled (ssr:false) so the toast fires after the Toaster is present.

MATCHESSolution

the content of the dock gets changed according to the new chat room (even though it's only for a split second) then closes — When I'm in one of the chat rooms, I can change chat rooms by clicking on the other chat rooms. Outcome: place the navigation action in a short timeout so it's placed at the end of Javascript's event loop and allows the dispatched actions to process and React to rerender once.

MATCHESSolution

Adjust/remedy the COOP configuration so the iframe/popup context does not enter the 'new with no opener' rule (e.g., relax COOP or ensure same-origin/top-level origin alignment), so window.open will return a window reference instead of null.

MATCHESSolution

Use a single ref that stores an array of item nodes (via ref callbacks) and update an index-based selection state on keydown. On arrow navigation, focus the corresponding node from the ref array (e.g., refs.current[selectedIndex].focus()).

MATCHESSolution

Trigger focus after readOnly updates—e.g., set a flag on double-click and call focus in a useEffect (or a callback) once readOnly is false.

MATCHESSolution

Render the dropdown panel within the modal’s DOM flow by setting `appendTo="self"` on the PrimeReact Dropdown (and ensure the modal/container stacking context allows interaction).

MATCHESSolution

Disable Bootstrap modal focus by adding `data-bs-focus="false"` to the modal element so the autocomplete dropdown displays correctly.

MATCHESSolution

BuildHash controls when the panel re-renders. — s&box UI uses Razor (.razor files) paired with PanelComponent. Tension: Key patterns:. Outcome: StateHasChanged();.

MATCHESSolution

Keep menu screens and in-game overlays in separate input modes. — Startup/customization menus can force Mouse.Visibility = Visible and keep pointer events enabled. Tension: Startup/customization menus can force Mouse.Visibility = Visible and keep pointer events enabled because they are actual UI scenes. Outcome: Fix pattern:.

MATCHESSolution

Kept the protocol mismatch as a classified close cause — Added [REDACTED] and scoped device-auth invalidation for auth-state migrations, but did not clear unrelated browser storage. Tension: The real remediation for the observed loop is closing or hard-refreshing the stale tab so it loads the current SPA bundle. Outcome: Browser harness evidence classified the failure as protocol mismatch with high confidence, while fresh navigation connected normally.

MATCHESSolution

Fixes: for the lattice, thread filters into [REDACTED] props and add a highlight uniform, OR (if unspecified) drop the chip; for locked items, either wire onRecordFocus from the host or remove cursor:pointer/tabIndex.

[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