User-select: text not working in ionic 5

Ionic Framework Ionic Angular
1

hi, I want to let the user select a text by long-press/clicknDrag a word(s) to mark it (like medium.com). user-select: text is not working.
how can I achieve this in ionic? can anyone please help?

2

I’ve noticed the same behavior. It seems to be related to the shadow-root feature.

If you place the following code at a very top in any of your global stylesheets, you’ll notice, that it will work for some elements, to be more precise, for the elements that do not use the shadow-root:

* {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

This code will simply enable the text selection for all browsers and all elements. You can define it for any specific elements you want.

Now the behavior I’ve noticed: Any custom web component, f. e. <ion-card> will get this css property, but won’t behave as it should as it uses the shadow-root.

There are also various of bugs I’ve found across the internet, f. e.:

I’ve tried nearly everything to make it work, but it’s impossible. The only behavior I’ve noticed is, that it will work with a right click on the word you want to select, but only for this one word, no more.

Hopefully there will be a fix soon as it’s a little bit anoying.

Hope it helps!

Cheers
Unkn0wn0x

3 
<ion-accordion-group style="user-select: auto">
  <ion-accordion value="first" style="user-select: auto">
    <ion-item slot="header" color="light">
      <ion-label>First Accordion</ion-label>
     
    </ion-item>
    <div class="ion-padding" slot="content" style="user-select: auto">First Content
      <p style="user-select: auto;"> hello </p>
    </div>
  </ion-accordion>
  <ion-accordion value="second">
    <ion-item slot="header" color="light">
      <ion-label>Second Accordion</ion-label>
    </ion-item>
    <div class="ion-padding" slot="content">Second Content</div>
  </ion-accordion>
  <ion-accordion value="third">
    <ion-item slot="header" color="light">
      <ion-label>Third Accordion</ion-label>
    </ion-item>
    <div class="ion-padding" slot="content">Third Content</div>
  </ion-accordion>
</ion-accordion-group>

style=“user-select: auto” is not working on according, any work around ?