Home Search Pricing Get inErrata About

Sign in Sign up

Graph/focus-event-ref-lifecycle-drift

Pattern

Focus and Event Handler Drift

focus-event-ref-lifecycle-drift

Dropdown/overlay interactions break when event propagation, focus, refs, or timing aren’t consistent across portals and lifecycle changes; handlers behave differently depending on call style, and focus can remain inside aria-hidden or before DOM nodes mount.

Node Details

Public graph metadata

Updated7/6/2026

Connections

30 linked nodes

the UI doesn’t update consistently, sometimes the count lags behind — when using useTransition. Tension: especially after fast re-renders or route changes. Outcome: Zustand state and Server Actions transitions aren’t syncing properly in React’s concurrent rendering mode.

user is changing the dropdown value before the hydration — slow networks. Tension: which doesnt trigger any event handlers as hydration didnt complete. Outcome: page should again be in the state that it is rendered during SSR changing dropdown value to default irrespective of user changes before hydration.

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).

Deciding where to wire socket event listeners to keep client state in sync: inside React hooks/components (registering callbacks in useEffect) versus inside a middleware/store layer or the socket class itself. The question also asks about the downsides of each approach.

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.”

Dropdown only opens after typing into the input

PointerEvent wasn't properly simulated in the test environment

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 SelectContent2 opening then i click to SelectTrigger1 — I have two shadcn/ui Select components. Tension: the content of of SelectContent1 doesn't show immediately. Outcome: Does it contain any blocking stuff like preventDefault or stopPropagation?

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

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.

item goes back to original position for a split second on drop

Using `useRef` inside a hook that needs a reference for a DOM node that may not exist or change during the component's render — popups, dialogs, etc. Tension: may cause stale references or missed updates. Outcome: keeping the state consistent with the latest DOM element.

the circles seem to be using all the same ref, as they're all synchronized instead of completing independently as the user scrolls down — when deployed to production. Tension: this only happens when running a production build of the project. Outcome: Worked around the issue by passing scrollYProgress to the LiIcon component instead of passing the ref.

when I start dragging, I change the opacity of the component — uses webkit2_41 since I'm on linux. Tension: the drag preview is captured before the drag is about to start NOT when it is started. Outcome: all i had to do was set the opacity then rather than after drag start.

Hovering over one React card causes both cards to expand, despite intending independent hover behavior for each card.

the event keeps getting added multiple times instead of just once — Each time my component updates or the page re-renders. Tension: making my app slower. Outcome: but I need it to work every time the user double-clicks, without getting duplicated.

A React component throws an occasional “hydration error” when rendering a nested list (a div inside a div) that maps over fetched data. The error appears inconsistently because the markup differs between server-rendered HTML and client-rendered HTML.

Redux state updates correctly in the UI, but inside the keyup handler (`handleKeyUp`) the component sees the old value of `playerState.isMenuUIVisible`. As a result, conditional logic (e.g., Escape handling) doesn’t run when expected.

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.

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

A `dblclick` event listener is attached to each `.ag-header-cell-resize` element multiple times whenever the component re-renders, causing performance degradation.

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.

it responding to `n+1` events later than it actually should — Because resize events often occur as many events in quick succession as the user drags their mouse to resize the window. Tension: the resize behaviour is also a little broken. Outcome: a future event then experiences the "all visible" DOM state.

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

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

failed to trigger when users clicked on question/post cards — a global navigation loading spinner that listened for anchor (`<a>`) tag clicks. Tension: Clicking cards produced no spinner even though the overlay worked correctly for form submissions and anchor-based navigation. Outcome: Inspecting the QuestionList component revealed it used `<div role="link" onClick={() => router.push(...)}>`.

[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