Skip to content

bug: ion-checkbox clicks whole item, where accordion does not.  #26771

@Webrow

Description

@Webrow

Prerequisites

Ionic Framework Version

  • v4.x
  • v5.x
  • v6.x
  • v7.x
  • Nightly

Current Behavior

We like to have accordion with a checkbox at the start.
Having a checkbox on an ion-item that is inside an accordion also toggles the accordion.
The other way around is doesnt (as expected?)

Expected Behavior

Toggling the checkbox should only toggle the checkbox,
Toggling the accordion should toggle the accordion.

Steps to Reproduce

https://codepen.io/Webrow/pen/LYBKWLY

Code Reproduction URL

No response

Ionic Info

$ ionic info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'

   Require stack:
   - C:\Users\rowan\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\rowan\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\rowan\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\rowan\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'

   Require stack:
   - C:\Users\rowan\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\rowan\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\rowan\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\rowan\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 6.20.6 (C:\Users\rowan\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.5.0
@angular-devkit/build-angular : 15.1.2
@angular-devkit/schematics : 15.1.2
@angular/cli : 15.1.2
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.6.1
@capacitor/android : not installed
@capacitor/core : 4.6.1
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 1.7.1

System:

NodeJS : v18.12.1 (C:\Program Files\nodejs\node.exe)
npm : 8.19.2
OS : Windows 10

Additional Information

I know that the intended behaviour of the designdocs is to have "one click on a line".
And I am more asking of a way to stop the behaviour of the checkbox.
Having an ionChange on the ion-accordion, fires only that event.
Having an ionChange on the ion-checkbox fires first the checkbox event, and afterwards the ion-accordion event is fired.
e.preventDefault(), stoppropegation etc is not stopping it.

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs: replythe issue needs a response from the user

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions