Consider opt-into inline styles

[jossmac]

These should be declared once in the consumer's stylesheet:

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.Tappable {
  -webkit-tap-highlight-color: 'rgba(0,0,0,0)';
  cursor: 'pointer';
}

Apart from weighing down the page with inline-styles it makes visually traversing the DOM that much more difficult

[onlymejosh]

+1 for this. I'm happy to make the change.

[slorber]

Yes

Or at least by default I don't think Tappable should disable userSelect (or it should be easy to override with a simple prop). Just got a bug about that :(

[NickColley]

Agreed, @JedWatson would you accept a patch for this?

[JedWatson]

@nickcolley yes - that would be welcome, thanks!

[artaommahe]

Also there is one problem - i have a chat there u can right click on nick and custom context menu shows. It did not work for tap-devices, so i attached Tappable for this element(user nick). But this provides another problem - user-select: none; prevents nick from selecting by mouse for copy paste on PC e.g. Maybe add some touch device detection before this styles apply? As i understand this case cannot be solved via css(touch devices screen sizes is not constant)

[slorber]

Currently it's quite hard to allow a tappable element to allow user selection, we have to override styles.

var touchStylesAllowingSelection = {
  WebkitTapHighlightColor: 'rgba(0,0,0,0)',
  WebkitTouchCallout: 'none',
  WebkitUserSelect: undefined,
  KhtmlUserSelect: undefined,
  MozUserSelect: undefined,
  msUserSelect: undefined,
  userSelect: undefined,
  cursor: undefined
};