From 3ba25554d7a394989f032c5fe6dacef09bfde632 Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Tue, 16 Oct 2018 00:15:30 +0100
Subject: [PATCH] Fixing zoom input in Firefox

---
 src/components/Output/index.tsx  | 15 ++++++++++-----
 src/components/Output/style.scss |  1 -
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Output/index.tsx b/src/components/Output/index.tsx
index caf020cd..2aec617a 100644
--- a/src/components/Output/index.tsx
+++ b/src/components/Output/index.tsx
@@ -113,14 +113,19 @@ export default class Output extends Component<Props, State> {
   }
 
   @bind
-  private editScale() {
+  private onScaleValueFocus() {
     this.setState({ editingScale: true }, () => {
-      if (this.scaleInput) this.scaleInput.focus();
+      if (this.scaleInput) {
+        // Firefox unfocuses the input straight away unless I force a style calculation here. I have
+        // no idea why, but it's late and I'm quite tired.
+        getComputedStyle(this.scaleInput).transform;
+        this.scaleInput.focus();
+      }
     });
   }
 
   @bind
-  private cancelEditScale() {
+  private onScaleInputBlur() {
     this.setState({ editingScale: false });
   }
 
@@ -245,10 +250,10 @@ export default class Output extends Component<Props, State> {
                 class={style.zoom}
                 value={Math.round(scale * 100)}
                 onInput={this.onScaleInputChanged}
-                onBlur={this.cancelEditScale}
+                onBlur={this.onScaleInputBlur}
               />
             ) : (
-              <span class={style.zoom} tabIndex={0} onFocus={this.editScale}>
+              <span class={style.zoom} tabIndex={0} onFocus={this.onScaleValueFocus}>
                 <span class={style.zoomValue}>{Math.round(scale * 100)}</span>
                 %
               </span>
diff --git a/src/components/Output/style.scss b/src/components/Output/style.scss
index 6f6fa708..dd74b11b 100644
--- a/src/components/Output/style.scss
+++ b/src/components/Output/style.scss
@@ -105,7 +105,6 @@ Note: These styles are temporary. They will be replaced before going live.
 }
 
 .zoom {
-  flex: 0 0 6em;
   color: #625E80;
   cursor: text;
   width: 6em;