Skip to content

bug: clicking within ion-input on the label triggers (click) twice #30165

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
Closed
3 tasks done
ben-kn-app opened this issue Jan 29, 2025 · 2 comments · Fixed by #30384
Closed
3 tasks done

bug: clicking within ion-input on the label triggers (click) twice #30165

ben-kn-app opened this issue Jan 29, 2025 · 2 comments · Fixed by #30384
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@ben-kn-app
Copy link

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

When you click on an ion-input with attribute (click)="function", this function is called twice when you click on the label within that ion-input. When you click on the value it is called once (as it should).

Expected Behavior

That the function would only be called once when you click on the label within the ion-input

Steps to Reproduce

Stackblitz

  1. Recent ionic & angular
  2. Example:
<ion-list>
  <ion-item>
    <ion-input label="Input with value" value="121 S Pinckney St #300" (click)="clicked()"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input labelPlacement="floating" label="Input with value" value="121 S Pinckney St #300" (click)="clicked()"></ion-input>
  </ion-item>
</ion-list>
  1. Clicking on the label within the ion-input calls the function clicked() twice.

Code Reproduction URL

https://stackblitz.com/edit/ubs56gug?file=src%2Fapp%2Fexample.component.html

Ionic Info

Its ionic from the current stackblitz config used in the docs, from package.json:

"@angular/animations": "^19.0.0",
    "@angular/common": "^19.0.0",
    "@angular/compiler": "^19.0.0",
    "@angular/core": "^19.0.0",
    "@angular/forms": "^19.0.0",
    "@angular/platform-browser": "^19.0.0",
    "@angular/platform-browser-dynamic": "^19.0.0",
    "@angular/router": "^19.0.0",
    "@ionic/angular": "^8.0.0",
    "@ionic/core": "^8.0.0",
    "ionicons": "7.4.0",
    "rxjs": "^7.8.1",
    "tslib": "^2.5.0",
    "zone.js": "~0.15.0"

Additional Information

Adding event.preventDefault(); can be used as a dirty fix untill this issue gets resolved.
@ionitron-bot ionitron-bot bot added the triage label Jan 29, 2025
@swseverance
Copy link

I think the framework may be behaving as expected. Here's an example using vanilla JS that shows the click event being dispatched twice when you listen for the event on a container element such as the following:

  <body>
    <div id="container">
      <label for="name">Name</label>
      <input type="text" id="name" />
    </div>
    <script>
      document
        .getElementById('container')
        .addEventListener('click', () => console.log('clicked'));
    </script>
  </body>

StackBlitz

@brandyscarney brandyscarney added package: core @ionic/core package type: bug a confirmed bug report and removed triage labels Apr 24, 2025
@ShaneK ShaneK mentioned this issue Apr 30, 2025
Merged
2 tasks
@ShaneK
Copy link
Member

ShaneK commented Apr 30, 2025 •
edited
Loading

Hello! While we're reviewing the fix for this, there's a dev build up that I believe addresses your issues: 8.5.7-dev.11746044124.147aab6c. Feel free to use it until it gets deployed into the next release, most likely next Wednesday.

Edit: Since this was merged into main, this should be released in 8.5.8 this week.

github-merge-queue bot pushed a commit that referenced this issue May 2, 2025
@ShaneK @thetaPC @brandyscarney
fix(labels): prevent clicking a label from triggering onClick twice o…
7d639b0 
…n several components (#30384)

Issue number: resolves #30165

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Currently, several components will trigger their `onClick` twice if you
click on their labels.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
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
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

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`

---------

Co-authored-by: Maria Hutt <[email protected]>
Co-authored-by: Brandy Smith <[email protected]>
christian-bromann pushed a commit that referenced this issue May 6, 2025
@ShaneK @thetaPC
@brandyscarney @christian-bromann
fix(labels): prevent clicking a label from triggering onClick twice o…
4fc08da 
…n several components (#30384)

Issue number: resolves #30165

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Currently, several components will trigger their `onClick` twice if you
click on their labels.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
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
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

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`

---------

Co-authored-by: Maria Hutt <[email protected]>
Co-authored-by: Brandy Smith <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Milestone
No milestone
4 participants
@ShaneK @brandyscarney @ben-kn-app @swseverance