bug: ion-button inside of an ion-label not clickable in v6

[kensodemann]

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

If you have something like this:

<ion-item>
  <ion-label>
    <ion-button expand="block" @click="doit('In a Label')">In a Label</ion-button>
  </ion-label>
</ion-item>

The click event will not fire on the button in Ionic v6.

It does work if I do this:

<ion-item>
  <div style="flex: auto">
    <ion-button expand="block" @click="doit('In a Label')">In a Label</ion-button>
  </div>
</ion-item>

Which is fine. The only reason I was using ion-label in the first place was so the expand="block" on the button would expand into something that took up the width of the screen.

Expected Behavior

Click event would fire, just like in v5.

I doubt this comes up much IRL, it seems like a odd construct to have a list of buttons like that outside of an app that is demoing various features of another thing, so I am totally cool with switching the to use the div that expands.

Steps to Reproduce

The the code repro provided below. Run as-is it will show it working properly in v5. Then do an npm i @ionic/{vue,vue-router}@next to see the issue.

Code Reproduction URL

https://github.com/kensodemann/test-button-list

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/Users/ken/.volta/tools/image/packages/@ionic/cli/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 6.0.0-rc.2

Capacitor:

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

Utility:

cordova-res : 0.15.3
native-run : 1.5.0

System:

NodeJS : v16.13.0 (/Users/ken/.volta/tools/image/node/16.13.0/bin/node)
npm : 8.1.3
OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

This commit caused the issue: 2c07a15#diff-c74ddc9584918db0c15a8ba1db280abfe14e7f7632b84e1dfbf74ce86315c6c3R315

Pointer events should not be disabled on the label in this case. We should find another way to ensure the select interface is clickable w/ the label.

[joaoeudes7]

If applied disabled on same component of IonItem all children are disabled

Example:

 <IonItem>
   <IonLabel position="floating">Sinal na Mão Direita *</IonLabel>
   <IonInput disabled={true} name="signalRight" ref={register({ required: true })} />
   <IonButton fill="outline" slot="end" onClick={() => onSelectSinal('right')}>Selecionar</IonButton>
 </IonItem>

The IonButton isnot clickable because of disabled or contentEditable of IonInput

Versions:

 "@ionic/react": "^5.6.13",
 "@capacitor/core": "2.4.7",

[liamdebeasi]

Hi everyone,

This was fixed in #24225, but the linked issue was never closed.

[ionitron-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.