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

[amandaejohnston]

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.

[liamdebeasi]

I took a closer look and things appear to be working as intended. ion-item has a Shadow DOM feature called delegatesFocus. When this feature is enabled and a non-focusable part of ion-item is clicked, such as ion-label, the first focusable element inside of ion-item is given focus instead.

Given the following HTML:

<ion-item>
  <ion-label>My Label</ion-label>
  <ion-input></ion-input>
</ion-item> 

Clicking the ion-label would cause the ion-input to be focused. This feature was originally added so that clicking a label focussed the relevant form element.

---

In Chrome, clicking the label also causes button elements to be focused (ion-button uses a button element internally). This means that the label no longer has focus and cannot be selected. This results in the behavior reported on this thread. This behavior does not happen in Safari because focus is not forwarded to button elements by default in this browser when using delegatesFocus. However, if you were to use an input instead of a button you would see the same behavior in Safari as you would in Chrome.

Here is an example of this running outside of Ionic: https://codepen.io/liamdebeasi/pen/xxYMvLB

---

While this behavior is intentional, I do think that it is undesirable in this instance. We are looking at some upgrades to how form components in Ionic work that should remove the need for delegatesFocus to be enabled on ion-item. Removing delegatesFocus will allow this particular scenario to behave as expected.

I am going to close this issue for now as things are working as intended. We are tracking these form component changes internally and plan on announcing an update on our Twitter, blog, and GitHub release page when we have more to share. Thanks!

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