Safari & Firefox fixes

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>
     );
   }

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;