Skip to content

fix(CardHorizontal): prevent duplicate button clicks - #1185

Merged
XOP merged 1 commit into
ClickHouse:mainfrom
fallintoplace:fix/card-horizontal-button-bubbling
Sep 8, 2026
Merged

fix(CardHorizontal): prevent duplicate button clicks#1185
XOP merged 1 commit into
ClickHouse:mainfrom
fallintoplace:fix/card-horizontal-button-bubbling

Conversation

@fallintoplace

@fallintoplace fallintoplace commented Sep 4, 2026

Copy link
Copy Markdown
Contributor

What changed

  • Stop the inner button click from bubbling to the card
  • The inner info button no longer triggers the card public onClick handler, including when onClick is passed through ...props
  • Add tests for onButtonClick and window.open call counts
  • Add a patch changeset

Why

When a CardHorizontal has an info button, clicking it also triggers the card handler. This could call the callback and open the URL twice.

Checks

  • corepack yarn test --run
  • corepack yarn typecheck
  • corepack yarn format
  • corepack yarn lint:code

@changeset-bot

changeset-bot Bot commented Sep 4, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b12e986

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@clickhouse/click-ui Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@XOP
XOP requested review from ariser and vineethasok and a lite review from Copilot September 7, 2026 08:16

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Approval recommended

The event-propagation fix is targeted and is backed by regression tests covering the reported double-invocation behavior.

Pull request overview

This PR prevents duplicate click handling in CardHorizontal when the nested info button is present by stopping event bubbling from the button to the card container, and adds regression tests plus a patch changeset.

Changes:

  • Add a dedicated handleButtonClick that calls stopPropagation() before delegating to the existing click handler.
  • Add tests asserting onButtonClick and window.open are each invoked exactly once when clicking the inner button.
  • Add a patch changeset documenting the fix.
File summaries
File Description
src/components/CardHorizontal/CardHorizontal.tsx Stops nested button click events from bubbling to the card, preventing duplicate handling.
src/components/CardHorizontal/CardHorizontal.test.tsx Adds regression tests for single-invocation behavior on inner button clicks.
.changeset/fix-card-horizontal-button-bubbling.md Records the fix as a patch release entry.
Review details
  • Files reviewed: 3/3 changed files
  • Comments generated: 0
  • Review effort level: Lite

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

@XOP

XOP commented Sep 7, 2026

Copy link
Copy Markdown
Collaborator

Hi @fallintoplace , thank you for contribution!

LGTM,
One thing that I would like to add to the changes - a note about clicking the inner button - the card exposes onClick publicly, and {...props} spreads after the internal handler, so consumers who wired it used to get button clicks too. Now they don't.

@XOP XOP added the bug Something isn't working label Sep 7, 2026
@fallintoplace
fallintoplace force-pushed the fix/card-horizontal-button-bubbling branch from dad8872 to b12e986 Compare September 7, 2026 08:54
@XOP

XOP commented Sep 7, 2026

Copy link
Copy Markdown
Collaborator

note: this will close #998

@XOP
XOP merged commit 94e8889 into ClickHouse:main Sep 8, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants