Skip to content

fix(labels): prevent clicking a label from triggering onClick twice on several components #30384

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

Merged
merged 13 commits into from
May 2, 2025

Conversation

ShaneK
Copy link
Member

@ShaneK ShaneK commented Apr 30, 2025

Issue number: resolves #30165


What is the current behavior?

Currently, several components will trigger their onClick twice if you click on their labels.

What is the new behavior?

After this fix, the affected components will only trigger onClick once per click of their labels or click directly on the element.

Does this introduce a breaking change?

  • Yes
  • No

Other information

The affected components are:

  • Checkbox
  • Select
  • Textarea
  • Toggle
  • Input

I also tested radio and range but could not reproduce the issue for them.

Note that two of the components, checkbox and toggle, had to have special implementations for both their test and fix because of how the host component acts as the component for accessibility purposes.

Current dev build: 8.5.7-dev.11746044124.147aab6c

@ShaneK ShaneK requested a review from a team as a code owner April 30, 2025 19:15
@ShaneK ShaneK requested a review from brandyscarney April 30, 2025 19:15
Copy link

vercel bot commented Apr 30, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ionic-framework ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 2, 2025 4:06pm

@github-actions github-actions bot added the package: core @ionic/core package label Apr 30, 2025
@ShaneK ShaneK changed the title fix(inputs): fixing clicking a label triggering onClick twice on multiple input components fix(labels): fixing clicking a label triggering onClick twice on multiple components Apr 30, 2025
@ShaneK ShaneK changed the title fix(labels): fixing clicking a label triggering onClick twice on multiple components fix(labels): prevent clicking a label from triggering onClick twice on several components Apr 30, 2025
ShaneK and others added 3 commits May 1, 2025 12:08
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

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

LGTM, just missing two annotations but not blockers to move to testing

Copy link
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

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

Tested the click events locally, including inside of an ion-item and verified all click events fire once now. Also verified the e2e tests fail without the fixes. Suggested a change to a couple test names for consistency. Looks good though! Great work. 🚀

ShaneK and others added 2 commits May 2, 2025 09:03
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
@ShaneK ShaneK added this pull request to the merge queue May 2, 2025
Merged via the queue into main with commit 7d639b0 May 2, 2025
50 checks passed
@ShaneK ShaneK deleted the FW-6498 branch May 2, 2025 16:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug: clicking within ion-input on the label triggers (click) twice
3 participants