From e26064694040319fe836e76344d6b508df3a9367 Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Thu, 18 Oct 2018 17:23:47 +0100
Subject: [PATCH] Text fields with inputs do the right thing

---
 src/codecs/resize/options.tsx  | 27 +++++++++++++++------------
 src/components/range/index.tsx | 14 +++++++++++---
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/codecs/resize/options.tsx b/src/codecs/resize/options.tsx
index 1a0b5896..95d5387b 100644
--- a/src/codecs/resize/options.tsx
+++ b/src/codecs/resize/options.tsx
@@ -26,7 +26,7 @@ export default class ResizerOptions extends Component<Props, State> {
 
   form?: HTMLFormElement;
 
-  reportOptions() {
+  private reportOptions() {
     const width = this.form!.width as HTMLInputElement;
     const height = this.form!.height as HTMLInputElement;
 
@@ -42,7 +42,7 @@ export default class ResizerOptions extends Component<Props, State> {
   }
 
   @bind
-  onChange(event: Event) {
+  private onChange() {
     this.reportOptions();
   }
 
@@ -54,19 +54,23 @@ export default class ResizerOptions extends Component<Props, State> {
   }
 
   @bind
-  onWidthInput(event: Event) {
-    if (!this.state.maintainAspect) return;
+  private onWidthInput() {
+    if (this.state.maintainAspect) {
+      const width = inputFieldValueAsNumber(this.form!.width);
+      this.form!.height.value = Math.round(width / this.props.aspect);
+    }
 
-    const width = inputFieldValueAsNumber(this.form!.width);
-    this.form!.height.value = Math.round(width / this.props.aspect);
+    this.reportOptions();
   }
 
   @bind
-  onHeightInput(event: Event) {
-    if (!this.state.maintainAspect) return;
+  private onHeightInput() {
+    if (this.state.maintainAspect) {
+      const height = inputFieldValueAsNumber(this.form!.height);
+      this.form!.width.value = Math.round(height * this.props.aspect);
+    }
 
-    const height = inputFieldValueAsNumber(this.form!.height);
-    this.form!.width.value = Math.round(height * this.props.aspect);
+    this.reportOptions();
   }
 
   render({ options, isVector }: Props, { maintainAspect }: State) {
@@ -95,7 +99,6 @@ export default class ResizerOptions extends Component<Props, State> {
             type="number"
             min="1"
             value={'' + options.width}
-            onChange={this.onChange}
             onInput={this.onWidthInput}
           />
         </label>
@@ -108,7 +111,7 @@ export default class ResizerOptions extends Component<Props, State> {
             type="number"
             min="1"
             value={'' + options.height}
-            onChange={this.onChange}
+            onInput={this.onHeightInput}
           />
         </label>
         <label class={style.optionInputFirst}>
diff --git a/src/components/range/index.tsx b/src/components/range/index.tsx
index 4e635229..b5e016ee 100644
--- a/src/components/range/index.tsx
+++ b/src/components/range/index.tsx
@@ -2,7 +2,7 @@ import { h, Component } from 'preact';
 import * as style from './style.scss';
 import RangeInputElement from '../../custom-els/RangeInput';
 import '../../custom-els/RangeInput';
-import { linkRef } from '../../lib/initial-util';
+import { linkRef, bind } from '../../lib/initial-util';
 
 interface Props extends JSX.HTMLAttributes {}
 interface State {}
@@ -10,6 +10,14 @@ interface State {}
 export default class Range extends Component<Props, State> {
   rangeWc?: RangeInputElement;
 
+  @bind
+  private onTextInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    this.rangeWc!.value = input.value;
+    const { onInput } = this.props;
+    if (onInput) onInput(event);
+  }
+
   render(props: Props) {
     const {
       children,
@@ -17,7 +25,7 @@ export default class Range extends Component<Props, State> {
     } = props;
 
     const {
-      value, min, max, onInput,
+      value, min, max,
     } = props;
 
     return (
@@ -29,7 +37,7 @@ export default class Range extends Component<Props, State> {
           value={value}
           min={min}
           max={max}
-          onInput={onInput}
+          onInput={this.onTextInput}
         />
         <div class={style.rangeWcContainer}>
           <range-input