From 10726d45f7f298ae596d6cdd91734a7039fcf62a Mon Sep 17 00:00:00 2001
From: shueja-personal <j.a.shue@outlook.com>
Date: Tue, 12 Nov 2024 18:03:44 -0800
Subject: [PATCH 1/2] Rerender input on submission to avoid conflicts with
 browser undo history

---
 src/components/input/ExpressionInput.tsx | 87 ++++++++----------------
 1 file changed, 29 insertions(+), 58 deletions(-)

diff --git a/src/components/input/ExpressionInput.tsx b/src/components/input/ExpressionInput.tsx
index 69e3ea437..5fb9bacc7 100644
--- a/src/components/input/ExpressionInput.tsx
+++ b/src/components/input/ExpressionInput.tsx
@@ -25,8 +25,8 @@ type Props = {
 
 type State = {
   focused: boolean;
-  editing: boolean;
-  editedValue: string;
+  valid: boolean;
+  resetCounter: number;
 };
 
 class Input extends Component<Props, State> {
@@ -35,58 +35,32 @@ class Input extends Component<Props, State> {
     super(props);
     this.state = {
       focused: false,
-      editing: false,
-      editedValue: this.props.number.expr.toString()
+      valid: true,
+      resetCounter: 0
     };
     this.inputElemRef = React.createRef<HTMLInputElement>();
   }
 
   unfocusedMode() {
     this.setState({
-      focused: false,
-      editing: false,
-      editedValue: this.props.number.expr.toString()
+      focused: false
     });
   }
 
   focusedMode() {
     this.setState({
-      focused: true,
-      editing: false,
-      editedValue: this.props.number.expr.toString()
-    });
-    this.inputElemRef.current!.value = this.props.number.expr.toString();
-    this.inputElemRef.current!.select();
-  }
-
-  editingMode() {
-    this.setState({
-      focused: true,
-      editing: true
+      focused: true
     });
   }
 
-  getDisplayStr(): string {
-    if (this.state.editing) {
-      return this.state.editedValue;
-    } else {
-      if (this.state.focused) {
-        return this.props.number.expr.toString();
-      } else {
-        return this.getRoundedStr();
-      }
-    }
-  }
-
   getRoundedStr(): string {
     return this.props.number.expr.toString();
   }
-
   getValid(): boolean {
     try {
-      if (this.state.editing) {
+      if (this.state.focused) {
         const newNode = this.props.number.validate(
-          math.parse(this.state.editedValue)
+          math.parse(this.inputElemRef.current!.value)
         );
         return newNode !== undefined;
       } else {
@@ -96,6 +70,13 @@ class Input extends Component<Props, State> {
       return false;
     }
   }
+  updateValid(): void {
+    this.setState({ valid: this.getValid() });
+  }
+  componentDidMount(): void {
+    this.inputElemRef.current!.defaultValue = this.getRoundedStr();
+    this.updateValid();
+  }
   componentDidUpdate(
     prevProps: Readonly<Props>,
     _prevState: Readonly<State>,
@@ -109,6 +90,10 @@ class Input extends Component<Props, State> {
       // focused so concise precision is shown.
       this.unfocusedMode();
     }
+    if (_prevState.resetCounter !== this.state.resetCounter) {
+      this.inputElemRef.current!.defaultValue = this.getRoundedStr();
+      this.updateValid();
+    }
   }
 
   render() {
@@ -146,12 +131,15 @@ class Input extends Component<Props, State> {
         )}
         {this.props.title instanceof Function && this.props.title()}
         <input
+          // Remove and re-mount the input component to clear its undo history
+          // every time this updates
+          key={this.state.resetCounter}
           ref={this.inputElemRef}
           type="text"
           className={
             styles.Number +
             (showNumberWhenDisabled ? " " + styles.ShowWhenDisabled : "") +
-            (this.getValid() ? " " : " " + styles.Invalid)
+            (this.state.valid ? " " : " " + styles.Invalid)
           }
           style={{
             minWidth: `${characters}ch`,
@@ -165,37 +153,20 @@ class Input extends Component<Props, State> {
           }}
           onBlur={(_e) => {
             const newNode = this.props.number.validate(
-              math.parse(this.state.editedValue)
+              math.parse(this.inputElemRef.current!.value)
             );
             if (newNode !== undefined) {
               this.props.number.set(newNode);
             }
-            this.unfocusedMode();
-          }}
-          onChange={(e) => {
-            if (!this.state.editing) {
-              this.editingMode();
-            }
-            this.setState({
-              editedValue: e.target.value
-            });
-            e.preventDefault();
+            this.setState((prev) => ({
+              resetCounter: prev.resetCounter + 1,
+              focused: false
+            }));
           }}
+          onChange={() => this.updateValid()}
           onKeyDown={(e) => {
             if (e.key == "Enter") {
               this.inputElemRef.current?.blur();
-              // let newNumber = parseFloat(this.state.editedValue);
-              // if (!Number.isNaN(newNumber)) {
-              //   this.props.setNumber(newNumber);
-              // }
-              // this.unfocusedMode();
-            }
-          }}
-          value={this.getDisplayStr()}
-          onMouseDown={(e) => {
-            if (!this.state.focused) {
-              this.focusedMode();
-              e.preventDefault();
             }
           }}
           autoComplete="off"

From e8d4f9231a7d3f93382b4d4ba79d3fa7886b55d1 Mon Sep 17 00:00:00 2001
From: shueja-personal <j.a.shue@outlook.com>
Date: Tue, 12 Nov 2024 18:05:58 -0800
Subject: [PATCH 2/2] Fix outdated comment

---
 src/components/input/ExpressionInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/input/ExpressionInput.tsx b/src/components/input/ExpressionInput.tsx
index 5fb9bacc7..4cfd5bc2d 100644
--- a/src/components/input/ExpressionInput.tsx
+++ b/src/components/input/ExpressionInput.tsx
@@ -87,7 +87,7 @@ class Input extends Component<Props, State> {
     }
     if (!prevProps.number.expr.equals(this.props.number.expr)) {
       // if the value has changed from the outside, make sure it is no longer
-      // focused so concise precision is shown.
+      // focused.
       this.unfocusedMode();
     }
     if (_prevState.resetCounter !== this.state.resetCounter) {