Home Search Pricing Get inErrata About

Sign in Sign up

Graph/focus-stealing-popover-input

AntiPattern

Focus-Stealing Popover Inputs

focus-stealing-popover-input

A reusable UI motif where a Popover/Sheet wrapper steals focus or blocks pointer/keyboard events, so an embedded CommandInput can’t be clicked or typed; fixes involve stopping auto-focus, adjusting event handling, and aligning library/component versions.

Node Details

Public graph metadata

Updated5/1/2026

Connections

30 linked nodes

MATCHESSolution

Wrap the tooltip content in a custom component that manages open state manually, toggling it on touch/click events (e.g., onTouchStart) and optionally supporting keyboard interaction (e.g., Enter key).

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

remove this line — go to your component ui `@components/ui/popover.tsx`. Tension: This fixes it. Outcome: This fixes it.

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

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

Update the calendar wrapper/container to enable interaction by adding `pointer-events-auto` (or otherwise removing the restrictive `pointer-events` styling) so the calendar remains clickable within the modal.

MATCHESSolution

my new problem however is that despite this the value remains selected — I use a hidden to capture the values. Tension: the inputs do actually respect the state changes. Outcome: the inputs do actually respect the state changes.

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

useIsFocused hook of react navigation and react query enabled condition — import { useIsFocused } from '@react-navigation/native';. Tension: not refetch everytime I focus on screen. Outcome: enabled: isFocused, retry: false.

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

Implement selection by wrapping each item node in a selectable container (e.g., StackPane with a selected pseudo-class/style), tracking a selectedIndex, updating highlight on mouse clicks and UP/DOWN key events, and scrolling the newly selected container into view.

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

You can listen for blur events on the outer wrapper using `slotProps.field.onBlur` — If the focus has moved outside, you can treat it as a real blur event. Tension: check if the new active element is still inside the same container.

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

Listen for user interaction using both `mousedown` (to catch remove/selection interactions that stop click propagation) and `keydown` (to detect clearing via Backspace). Use these events within the DOM/mutation observer logic to distinguish user edits from programmatic prop updates.

MATCHESSolution

One of those pages contains a MUI Select component. Tension: I can't figure away around that restriction.

MATCHESSolution

Hide the forms using `visibility: hidden` (and optionally `height/width` handling if needed) or preserve input state externally (e.g., React state) so values persist across visibility changes.

MATCHESSolution

Change the switching component’s `mode` to `popLayout` (instead of `wait`/`sync`) so Framer Motion synchronizes layout/animation transitions correctly and prevents overlapping words.

MATCHESSolution

Update `slotProps` to style the `popper` and target `& .MuiChartsTooltip-paper` (and nested elements like `.MuiTypography-root`) within the `sx` object, as shown in the working example for MUI-x 7.22.2.

MATCHESSolution

Update the DOM query to target the native input rendered inside the wrapper (e.g., `*[name="voucherCode"] input` or use `getByRole`/`getByLabelText` for the actual input). Then perform the change event on that correct input element so the Formik field value updates.

MATCHESSolution

I can just add the focus listerens to `this` and the parts separately: — `this` and each part using this line:. Outcome: `this.addFocusListener(event -> this.focused = true); Stream.of(part1, part2, part3).forEach(c -> c.addFocusListener(event -> this.focused = true));.

MATCHESSolution

Intercept double-click and prevent the cell edit trigger on that interaction (e.g., override/disable the default edit-on-double-click behavior and route double-click to a custom handler, while leaving the single-click edit trigger intact).

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

Facepunch Sandbox demonstrates Razor-based UI architecture for in-game menus. — s&box Razor UI: PanelComponent with Mode Switching. Tension: PanelComponent inheritance, SpawnMenuMode attribute system, TypeLibrary-based mode discovery, input handling with stickOpen state, and mode switching. Outcome: showing PanelComponent inheritance, SpawnMenuMode attribute system, TypeLibrary-based mode discovery, input handling with stickOpen state, and mode switching.

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

© 2026 Inerrata