palantir/blueprint

Enabled anchor buttons don't trigger the onClick callback if the button is immediately disabled after being clicked. Buttons do.

Open

#5245 opened on Apr 7, 2022

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P3Package: coreType: bughelp wanted

Description

Environment

  • Package version(s):
  • Operating System:
  • Browser name and version:

Code Sandbox

I have a button that I only want to be enabled when a certain element has focus. When the user clicks the button, that element will no longer have focus so the button will no longer be enabled, but I want the initial click to go through and trigger the onClick callback. I am seeing this work with <Button /> but not <AnchorButton />. It'd be nice if when I clicked an enabled anchor button, the onClick callback went through even if I immediately disable the button. I can't just use a Button instead because I also want to show a tooltip on the disabled button which AnchorButtons are recommended for.

Bug report Package version(s): Browser and OS versions:

Expected behavior When I click an enabled button, the callback is run

Steps to reproduce

  1. Have an anchor button that is disabled when a given element doesn't have focus and has an onclick callback

  2. Click the button

  3. The callback isn't run

  4. Repeat the above with a normal Button

  5. The callback is run

Actual behavior

If I click a button while it's enabled and then immediately disabled it, the callback isn't run

Expected behavior

When I click an enabled button, the callback is run

Possible solution

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React basicsBlueprint components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Investigate the difference in event handling between AnchorButton and Button components in Blueprint. Look at the source code for both components, likely in packages/blueprintjs/core/src/components/button/buttons.tsx. Check how the onClick event is attached and if there's a check for disabled state that prevents the callback. Consider whether a ref or callback ref approach could ensure the click event is captured before disabling. Also review any existing test files for button components to understand expected behavior.