Text fields with inputs do the right thing

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

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