Skip to content

fix(button): Prevent duplicate click events across frameworks while preserving native behaviour #4359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

michaelmkraus
Copy link
Contributor

@michaelmkraus michaelmkraus commented Jun 11, 2025

Proposed changes

  • Prevent duplicate click events across frameworks while preserving native behaviour

Types of changes

  • Bugfix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (fix on existing components or architectural decisions)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation Update (if none of the other choices apply)

closes #4339

Copy link
Contributor

@michaelmkraus michaelmkraus changed the title fix(button): prevent duplicate click events by stopping propagation fix(button): Prevent duplicate click events across frameworks while preserving native behaviour Jun 12, 2025
@mfranzke mfranzke requested a review from Copilot June 16, 2025 05:07
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR addresses the duplicate click events issue by refactoring the button component click handler to use the useTarget utility for framework-specific event handling, and updates the Angular configuration to reflect new experimental outputs settings for the click event.

  • Updated the button component to use a spread from useTarget for handling onClick events in a framework-agnostic manner.
  • Modified the Angular configuration to apply an experimental outputs mapping for 'click'.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
packages/components/src/components/button/button.lite.tsx Refactored onClick handling using useTarget to prevent duplicate click events
packages/components/configs/angular/mitosis.config.cjs Updated Angular config to include experimental outputs for click event mapping
Comments suppressed due to low confidence (2)

packages/components/src/components/button/button.lite.tsx:55

  • [nitpick] Consider adding an inline comment explaining the purpose of using useTarget for handling click events to aid future maintainers in understanding the framework-specific logic.
{...useTarget({

packages/components/configs/angular/mitosis.config.cjs:9

  • [nitpick] Add a comment to explain the experimental outputs configuration and its intent to map the 'click' event, which will help clarify future updates or troubleshooting.
angular: {

@@ -7,6 +6,12 @@ module.exports = {
targets: ['angular'],
dest: '../../output/tmp',
options: {
angular
angular: {
experimental: {
Copy link
Collaborator

Choose a reason for hiding this comment

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

@michaelmkraus you removed the settings for signals api with this :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: 👀 In review
Development

Successfully merging this pull request may close these issues.

Regression: Buttons fire twice in Angular
3 participants