bug: Cannot select text in IonItem IonLabel when there is a IonButton present (Ionic 5, VueJS)

[maelp]

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

When adding an ion-item like this, I can select the text of the ion-label in a browser using the mouse (it highlights the text that I select and I can copy it)

        <ion-list v-if="items.length > 0">
          <ion-item v-for="item in items" :key="item.key">
            <ion-label>{{ item.id }}</ion-label>
          </ion-item>
        </ion-list>

but if I add a ion-button to it, the text can no longer be selected

        <ion-list v-if="items.length > 0">
          <ion-item v-for="item in items" :key="item.key">
            <ion-label>{{ item.id }}</ion-label>
            <ion-button slot="end">action</ion-button>
          </ion-item>
        </ion-list>

Expected Behavior

The text should be selectable and copyable in a browser independently of the presence of a ion-button

Steps to Reproduce

• create a ionic item such as above
• try to select the text

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/Users/primet/.node/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 5.8.5

Capacitor:

Capacitor CLI : 3.3.1
@capacitor/android : 3.4.3
@capacitor/core : 3.4.1
@capacitor/ios : 3.3.1

Utility:

cordova-res (update available: 0.15.4) : 0.15.3
native-run : 1.5.0

System:

NodeJS : v16.14.0 (/usr/local/bin/node)
npm : 8.3.1
OS : macOS Monterey

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[liamdebeasi]

Thanks for the issue. Can you provide a GitHub repo I can use to verify this behavior?

[maelp]

Side note: text selection on the item with a button works in Safari, but not in Google Chrome

[maelp]

Here is the repo, based on the default Ionic VueJS list example
https://github.com/maelp/example-vuejs-bug

[averyrousseau]

Thanks for the issue, I'm able to replicate this in core on the latest Ionic version. A couple things I noticed:

• The cursor changes to an I-beam as normal when hovering over the un-highlightable text.
• Setting display: none on the button makes the issue go away, even if the button is still present in the markup.

I'm as-of-yet unsure what would be causing this, but I'll go ahead and file it as a bug so we can investigate more closely.