Add user select none to prevent cursor on ios safari

The readonly attribute on touch inputs hides the keyboard, but recently the cursor started appearing. Adding touch events removes the flashing cursor. Dogfalo/materialize#2448 Also moved unprefixed properties last
MarcoAntonioAG · Feb 7, 2017 · 219b48d · 219b48d
1 parent 1bb0477
commit 219b48d
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/css/CalendarMonth.scss b/css/CalendarMonth.scss
@@ -17,10 +17,10 @@
     border-spacing: 0;
   }
 
-  user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
+  user-select: none;
 }
 
 .CalendarMonth--horizontal {

diff --git a/css/DateInput.scss b/css/DateInput.scss
@@ -50,6 +50,13 @@ $caret-top: $react-dates-spacing-vertical-picker - $react-dates-width-tooltip-ar
   border: 0;
   height: 100%;
   width: 100%;
+
+  &[readonly] {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
 }
 
 .DateInput__display-text {

diff --git a/css/DayPickerNavigation.scss b/css/DayPickerNavigation.scss
@@ -4,10 +4,10 @@
 .DayPickerNavigation__next {
   cursor: pointer;
   line-height: 0.78;
-  user-select: none;
   -webkit-user-select: none; /* Chrome/Safari */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* IE10+ */
+  user-select: none;
 }
 
 .DayPickerNavigation__prev--default,