0

It seems from the other questions posted and ionic forums I've seen (see links below), that ionic has some sort of default setting in it's components that automatically applies user-select: none to the body of the app.

I am NOT looking for a workaround here, but rather I'd like to understand the PURPOSE of this. Why did ionic developers make this the default? How exactly is this even being applied? Is there some javascript in the background that is applying this?

If I apply a workaround such as in app.scss:

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

OR applying in app.module.ts:

@NgModule({
  declarations: [
    ....
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
      platforms: {
        ios: {
          scrollAssist: false,
          autoFocusAssist: false
        },
        android: {
          scrollAssist: false,
          autoFocusAssist: false
        }
      }
    }),
    HttpModule
  ]
})
....,

..will I be overriding some useful or essential feature of Ionic that was originally intended?

What side effects will I get by applying one of these options?

referenced links: ionic 2: How to make text selectable?

https://github.com/ionic-team/ionic/issues/5198#issuecomment-344606178

type_master_flash
  • 289
  • 3
  • 2

1 Answers1

0

Ionic uses hammer.js, which by default optimizes behaviors in certain way (eyeing touch). Specifically see this page: http://hammerjs.github.io/tips/

“I can’t select my text anymore!” Hammer is setting a property to improve the UX of the panning on desktop. Regularly, the desktop browser would select the text while you drag over the page. The user-select css property disables this.

If you care about the text-selection and not so much about the desktop experience, you can simply remove this option from the defaults. Make sure you do this before creating an instance.

delete Hammer.defaults.cssProps.userSelect;
Sergey Rudenko
  • 8,809
  • 2
  • 24
  • 51