From 2e65f8ad7323b2648e8fcb06512ed63553869ad6 Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Thu, 18 Oct 2018 17:39:20 +0100
Subject: [PATCH] Safari & Firefox fixes

---
 src/components/range/index.tsx  | 16 +++++++++-------
 src/components/range/style.scss |  6 ++++++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/range/index.tsx b/src/components/range/index.tsx
index b5e016ee..ad41406f 100644
--- a/src/components/range/index.tsx
+++ b/src/components/range/index.tsx
@@ -31,6 +31,15 @@ export default class Range extends Component<Props, State> {
     return (
       <label class={style.range}>
         <span class={style.labelText}>{children}</span>
+        {/* On interaction, Safari gives focus to the first element in the label, so the
+        <range-input> is deliberately first. */}
+        <div class={style.rangeWcContainer}>
+          <range-input
+            ref={linkRef(this, 'rangeWc')}
+            class={style.rangeWc}
+            {...otherProps}
+          />
+        </div>
         <input
           type="number"
           class={style.textInput}
@@ -39,13 +48,6 @@ export default class Range extends Component<Props, State> {
           max={max}
           onInput={this.onTextInput}
         />
-        <div class={style.rangeWcContainer}>
-          <range-input
-            ref={linkRef(this, 'rangeWc')}
-            class={style.rangeWc}
-            {...otherProps}
-          />
-        </div>
       </label>
     );
   }
diff --git a/src/components/range/style.scss b/src/components/range/style.scss
index c3bcdee1..40597af6 100644
--- a/src/components/range/style.scss
+++ b/src/components/range/style.scss
@@ -8,6 +8,7 @@
 }
 
 .range-wc-container {
+  grid-row: 2 / 3;
   grid-column: 1 / 3;
 }
 
@@ -16,6 +17,9 @@
 }
 
 .text-input {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+
   text-align: right;
   background: transparent;
   color: inherit;
@@ -36,6 +40,8 @@
 
 
   // Remove the number controls
+  -moz-appearance: textfield;
+
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -moz-appearance: none;