bug: ion-toggle with ion-item not properly toggling

[HipyCas]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

I have a ion-toggle inside an ion-item as the documentation details, and opposed to what I expected and desire, when I click on the ion-item (not including the ion-toggle) the toggle does not change, only when I click exactly on the toggle.

Expected Behavior

I expected that clicking anywhere on the ion-item would toggle the ion-toggle, as in mobile and even in desktop is pretty difficult and in general uncomfortable clicking exactly the toggle.

Steps to Reproduce

I am using Vue 3, and this is (an adaptation of) the code that I'm using:

<ion-item lines="inset" button :detail="false">
    <ion-label>Toggle</ion-label>
    <ion-toggle v-model="value"></ion-toggle>
</ion-item>

(value is an example variable that would be defined)

Code Reproduction URL

https://github.com/HipyCas/ionic-toggle-reproduction

Ionic Info

Ionic:

   Ionic CLI       : 6.20.1 (/home/hipy/.nvm/versions/node/v18.4.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 6.0.4

Capacitor:

   Capacitor CLI      : 3.3.2
   @capacitor/android : 3.3.3
   @capacitor/core    : 3.3.2
   @capacitor/ios     : 3.3.3

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.6.0) : 1.5.0

System:

   NodeJS : v18.4.0 (/home/hipy/.nvm/versions/node/v18.4.0/bin/node)
   npm    : 8.12.1
   OS     : Linux 5.17

Additional Information

No response

[liamdebeasi]

Thanks for the issue. This behavior was a design decision made to align with iOS. However, the behavior has been seen as confusing by others, so I think it makes sense to align the ion-toggle behavior with that of other components such as ion-checkbox.

[HipyCas]

Any updates on this?

[liamdebeasi]

We have a proposal for updating the form control API that should fix the issue: https://github.com/ionic-team/ionic-framework/discussions/25660

[liamdebeasi]

Thanks for the report. In Ionic 7.0 we will be introducing a new ion-toggle syntax that resolves this issue. Details on the syntax change can be found here: https://github.com/ionic-team/ionic-framework/discussions/25660

The work for this was completed in https://github.com/ionic-team/ionic-framework/pull/26357, so I am going to close this issue. We will have a public beta period in the future for developers to test and provide feedback on Ionic 7. Please let me know if there are any questions.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.