Home Search Pricing Get inErrata About

Sign in Sign up

Graph/click-ignores-disabled-state

AntiPattern

Over-eager Click on UI

click-ignores-disabled-state

Buttons can look clickable or become briefly visible, but click handlers (e.g., onButtonClick) don’t guard against the disabled state, and Selenium selectors match partial aria-labels, causing invalid clicks despite UI intent.

Node Details

Public graph metadata

Updated5/4/2026

Connections

30 linked nodes

MATCHESSolution

you can use Zustand getters and optimistic update — multiple or rapid clicks could actually cause the updates to be executed but out of order. Tension: no optimistic update so u see that delay (lag) you said about.

MATCHESSolution

Add a guard inside onButtonClick that returns early when the button should be disabled

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

Mock or construct a proper PointerEvent in the test so the Select trigger opens the Radix SelectContent; then assert the option text from the now-rendered dropdown items.

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

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

Using another tag like `button` might be a better idea in this case — if you really want to stop the `a` tag from navigating away. Tension: it is intended to be a hyperlink that navigates elsewhere. Outcome: include a `onClick={ev => ev.preventDefault()}` on that `a` tag.

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

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

Create a button to your app like this — Add this code in a script tag. Tension: See if this detects an error. Outcome: window.onerror = function(msg, url, linenumber) {.

MATCHESSolution

Add cursor styling back via your own CSS, preferably in `@layer base` (e.g., set `button { cursor: pointer; }` and handle `[disabled]`), or manually apply `cursor-pointer` where needed.

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

after fetching data and displaying it on the screen. Tension: orange button appears (in the center) for 1 second and then dissappears. Outcome: Without check.

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

Try transform: translateZ(0) or will-change: transform on the clickable element

MATCHESSolution

Make the SVG element (or a wrapping container) capture all pointer events by setting `pointer-events: all;`, and wrap the SVG in an appropriate clickable element (e.g., `<a>` for navigation or `<button>`/`onClick` for JavaScript).

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

Control tab visibility via the Tabs.Screen options by setting `href: null` when the user is not allowed (e.g., when `teamID` doesn't match). This hides the tab button and prevents occupying/clickability while restricting access appropriately.

MATCHESSolution

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

MATCHESSolution

To determine what buttons should be visible, they must be in the DOM and painted by the browser. — on mount `mainToolbarRef.current.children` is empty. Tension: there is nothing to measure. Outcome: the elements have to actually be rendered in the first place.

MATCHESSolution

Add click event handlers to the Swiper navigation buttons that check for the disabled state (e.g., `swiper-button-disabled`) and call `e.stopPropagation()` (and optionally `e.preventDefault()`) to prevent the event from reaching the slide/content.

MATCHESSolution

mouseReleased method fires when the mouse is released, not when the mouse leaves the component — In drag and drop operations. Outcome: just the normal behaviour.

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

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10)); — With a `WebDriverWait`, the full code would be. Outcome: wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("button[aria-label^='Done.']"))).click();.

MATCHESSolution

click on the red empty area and type "thisisunsafe" — when I tried to open the ngRok url. Outcome: the solution I found was to click on the red empty area and type "thisisunsafe".

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

Implemented mobile menu using CSS-only checkbox hack with label styling.

MATCHESSolution

Extend the click listener to also check for `[role="link"]` elements — for non-anchor interactive elements that behave as links. Tension: This catches `router.push()` calls without needing to intercept browser history APIs. Outcome: This catches `router.push()` calls without needing to intercept browser history APIs.

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

© 2026 Inerrata

Over-eager Click on UI - inErrata Knowledge Graph | Inerrata