Skip to content
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.

Sign up for GitHub

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

Jump to bottom

p-checkbox firing onClick event twice when clicking the label if inputId is populated #14487

Closed
tbertran opened this issue Jan 4, 2024 · 0 comments · Fixed by #14489
Closed

p-checkbox firing onClick event twice when clicking the label if inputId is populated #14487

tbertran opened this issue Jan 4, 2024 · 0 comments · Fixed by #14489
Assignees
@mehmetcetin01140
Labels
LTS-16-PORTABLE Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone
17.3.2

Comments

@tbertran
Copy link

tbertran commented Jan 4, 2024

Describe the bug

Clicking the label does not check/uncheck the checkbox. It appears to only be happening when a value is passed into the inputId parameter.
The reason is because onClick() is set to be called twice: once from the parent div and once from the label and passing inputId binds the label (with for="...") to the checkbox.

Environment

Latest Angular + PrimeNg, easily reproducible (see the StackBlitz link below)

Reproducer

https://stackblitz.com/edit/github-bnmzm9

Angular version

17.0.8

PrimeNG version

17.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.13.0

Browser(s)

Brave Version 1.61.109 Chromium: 120.0.6099.144

Steps to reproduce the behavior

  1. Use the p-checkbox component with the following properties: inputId, label
  2. Click the label, notice the checked state does not change
  3. Click the actual checkbox input, notice the checked state changes

Expected behavior

Clicking either the label or the checkbox input should flip the checked state
@tbertran tbertran added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jan 4, 2024
@mehmetcetin01140 mehmetcetin01140 self-assigned this Jan 5, 2024
mehmetcetin01140 added a commit that referenced this issue Jan 5, 2024
@mehmetcetin01140
Fixed #14487 - Checkbox | firing onClick event twice when clicking th…
5c75183 
…e label if inputId is populated
@mehmetcetin01140 mehmetcetin01140 mentioned this issue Jan 5, 2024
Merged
@mehmetcetin01140 mehmetcetin01140 added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jan 5, 2024
@cetincakiroglu cetincakiroglu added this to the 17.3.2 milestone Jan 8, 2024
cetincakiroglu added a commit that referenced this issue Jan 10, 2024
@cetincakiroglu
Merge pull request #14489 from primefaces/issue-14487
3c96b5a 
Fixed #14487 - Checkbox |  firing onClick event twice when clicking t…
erqk added a commit to erqk/ng-dynamic-json-form that referenced this issue Jun 27, 2024
@erqk
fix(ui-primeng-checkbox): Remove preventDefault() as the issue is bug…
15e2a8b 
… from PrimeNG

#14487: primefaces/primeng#14487
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mehmetcetin01140 mehmetcetin01140

Labels
LTS-16-PORTABLE Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Milestone
17.3.2
Development

Successfully merging a pull request may close this issue.

Fixed #14487 - Checkbox | firing onClick event twice when clicking t… primefaces/primeng
3 participants
@tbertran @cetincakiroglu @mehmetcetin01140