-
Notifications
You must be signed in to change notification settings - Fork 13.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: Cannot select text in IonItem IonLabel when there is a IonButton present (Ionic 5, VueJS) #24956
Comments
Thanks for the issue! This issue has been labeled as 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. |
Thanks for the issue. Can you provide a GitHub repo I can use to verify this behavior? |
Side note: text selection on the item with a button works in Safari, but not in Google Chrome |
Here is the repo, based on the default Ionic VueJS list example |
Thanks for the issue, I'm able to replicate this in core on the latest Ionic version. A couple things I noticed:
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. |
I took a closer look and things appear to be working as intended. Given the following HTML: <ion-item>
<ion-label>My Label</ion-label>
<ion-input></ion-input>
</ion-item> Clicking the In Chrome, clicking the label also causes 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 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! |
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. |
Prerequisites
Ionic Framework Version
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)
but if I add a ion-button to it, the text can no longer be selected
Expected Behavior
The text should be selectable and copyable in a browser independently of the presence of a ion-button
Steps to Reproduce
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
The text was updated successfully, but these errors were encountered: