From 8e263aad5beff083975df7dc4d1fbea7dcf7f018 Mon Sep 17 00:00:00 2001
From: Alberto Iannaccone <a.iannaccone@arduino.cc>
Date: Fri, 7 Oct 2022 18:12:52 +0200
Subject: [PATCH 1/5] let the user edit the stepper input with keyboard

---
 .../dialogs/settings/settings-step-input.tsx  | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx b/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
index e6eef4b9c..b40d7e90a 100644
--- a/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
@@ -24,6 +24,8 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
     classNames,
   } = props;
 
+  const [tempValue, setTempValue] = React.useState<string>(String(value));
+
   const clamp = (value: number, min: number, max: number): number => {
     return Math.min(Math.max(value, min), max);
   };
@@ -52,17 +54,24 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
 
   const onUserInput = (event: React.ChangeEvent<HTMLInputElement>): void => {
     const { value: eventValue } = event.target;
+    setTempValue(eventValue);
+  };
 
-    if (eventValue === '') {
-      setSettingsStateValue(0);
-    }
-
-    const number = Number(eventValue);
+  /* Prevent the user from entering invalid values */
+  const onBlur = (): void => {
+    const tempValueAsNumber = Number(tempValue);
 
-    if (!isNaN(number) && number !== value) {
-      const newValue = clamp(number, minValue, maxValue);
+    /* If the user input is not a number, reset the input to the previous value */
+    if (isNaN(tempValueAsNumber) || tempValue === '') {
+      setTempValue(String(value));
+      return;
+    }
+    if (tempValueAsNumber !== value) {
+      /* If the user input is a number, clamp it to the min and max values */
+      const newValue = clamp(tempValueAsNumber, minValue, maxValue);
 
       setSettingsStateValue(newValue);
+      setTempValue(String(newValue));
     }
   };
 
@@ -73,8 +82,9 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
     <div className="settings-step-input-container">
       <input
         className={classnames('settings-step-input-element', classNames?.input)}
-        value={value.toString()}
+        value={tempValue.toString()}
         onChange={onUserInput}
+        onBlur={onBlur}
         type="number"
         pattern="[0-9]+"
       />

From 25d7047ac99674929b312ed73056e4c64d7daaf4 Mon Sep 17 00:00:00 2001
From: David Simpson <45690499+davegarthsimpson@users.noreply.github.com>
Date: Tue, 11 Oct 2022 18:00:23 +0200
Subject: [PATCH 2/5] consider exceptions and fix styling

---
 .../dialogs/settings/settings-component.tsx   | 12 +++-
 .../dialogs/settings/settings-step-input.tsx  | 59 +++++++++++++------
 .../src/browser/style/settings-step-input.css |  6 +-
 3 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/arduino-ide-extension/src/browser/dialogs/settings/settings-component.tsx b/arduino-ide-extension/src/browser/dialogs/settings/settings-component.tsx
index bbc73b8c3..3138c7242 100644
--- a/arduino-ide-extension/src/browser/dialogs/settings/settings-component.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/settings/settings-component.tsx
@@ -180,7 +180,8 @@ export class SettingsComponent extends React.Component<
           <div className="column">
             <div className="flex-line">
               <SettingsStepInput
-                value={this.state.editorFontSize}
+                key={`font-size-stepper-${String(this.state.editorFontSize)}`}
+                initialValue={this.state.editorFontSize}
                 setSettingsStateValue={this.setFontSize}
                 step={fontSizeStep}
                 maxValue={maxFontSize}
@@ -199,13 +200,18 @@ export class SettingsComponent extends React.Component<
               </label>
               <div>
                 <SettingsStepInput
-                  value={scalePercentage}
+                  key={`scale-stepper-${String(scalePercentage)}`}
+                  initialValue={scalePercentage}
                   setSettingsStateValue={this.setInterfaceScale}
                   step={scaleStep}
                   maxValue={maxScale}
                   minValue={minScale}
                   unitOfMeasure="%"
-                  classNames={{ input: 'theia-input small with-margin' }}
+                  classNames={{
+                    input: 'theia-input small with-margin',
+                    buttonsContainer:
+                      'settings-step-input-buttons-container-perc',
+                  }}
                 />
               </div>
             </div>
diff --git a/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx b/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
index b40d7e90a..10cfe5c76 100644
--- a/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
@@ -2,7 +2,7 @@ import * as React from '@theia/core/shared/react';
 import classnames from 'classnames';
 
 interface SettingsStepInputProps {
-  value: number;
+  initialValue: number;
   setSettingsStateValue: (value: number) => void;
   step: number;
   maxValue: number;
@@ -15,7 +15,7 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
   props: SettingsStepInputProps
 ) => {
   const {
-    value,
+    initialValue,
     setSettingsStateValue,
     step,
     maxValue,
@@ -24,7 +24,14 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
     classNames,
   } = props;
 
-  const [tempValue, setTempValue] = React.useState<string>(String(value));
+  const [valueState, setValueState] = React.useState<{
+    currentValue: number;
+    isEmptyString: boolean;
+  }>({
+    currentValue: initialValue,
+    isEmptyString: false,
+  });
+  const { currentValue, isEmptyString } = valueState;
 
   const clamp = (value: number, min: number, max: number): number => {
     return Math.min(Math.max(value, min), max);
@@ -34,10 +41,11 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
     roundingOperation: 'ceil' | 'floor',
     stepOperation: (a: number, b: number) => number
   ): void => {
-    const valueRoundedToScale = Math[roundingOperation](value / step) * step;
+    const valueRoundedToScale =
+      Math[roundingOperation](currentValue / step) * step;
     const calculatedValue =
-      valueRoundedToScale === value
-        ? stepOperation(value, step)
+      valueRoundedToScale === currentValue
+        ? stepOperation(currentValue, step)
         : valueRoundedToScale;
     const newValue = clamp(calculatedValue, minValue, maxValue);
 
@@ -54,41 +62,54 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
 
   const onUserInput = (event: React.ChangeEvent<HTMLInputElement>): void => {
     const { value: eventValue } = event.target;
-    setTempValue(eventValue);
+    setValueState({
+      currentValue: Number(eventValue),
+      isEmptyString: eventValue === '',
+    });
   };
 
   /* Prevent the user from entering invalid values */
   const onBlur = (): void => {
-    const tempValueAsNumber = Number(tempValue);
-
-    /* If the user input is not a number, reset the input to the previous value */
-    if (isNaN(tempValueAsNumber) || tempValue === '') {
-      setTempValue(String(value));
+    if ((currentValue === 0 && minValue > 0) || isNaN(currentValue)) {
+      setValueState({
+        currentValue: initialValue,
+        isEmptyString: false,
+      });
       return;
     }
-    if (tempValueAsNumber !== value) {
+
+    if (currentValue !== initialValue) {
       /* If the user input is a number, clamp it to the min and max values */
-      const newValue = clamp(tempValueAsNumber, minValue, maxValue);
+      const newValue = clamp(currentValue, minValue, maxValue);
 
       setSettingsStateValue(newValue);
-      setTempValue(String(newValue));
     }
   };
 
-  const upDisabled = value >= maxValue;
-  const downDisabled = value <= minValue;
+  const valueIsNotWithinRange =
+    currentValue < minValue || currentValue > maxValue;
+  const isDisabledException =
+    valueIsNotWithinRange || isEmptyString || isNaN(currentValue);
+
+  const upDisabled = isDisabledException || currentValue >= maxValue;
+  const downDisabled = isDisabledException || currentValue <= minValue;
 
   return (
     <div className="settings-step-input-container">
       <input
         className={classnames('settings-step-input-element', classNames?.input)}
-        value={tempValue.toString()}
+        value={isEmptyString ? '' : String(currentValue)}
         onChange={onUserInput}
         onBlur={onBlur}
         type="number"
         pattern="[0-9]+"
       />
-      <div className="settings-step-input-buttons-container">
+      <div
+        className={classnames(
+          'settings-step-input-buttons-container',
+          classNames?.buttonsContainer
+        )}
+      >
         <button
           className="settings-step-input-button settings-step-input-up-button"
           disabled={upDisabled}
diff --git a/arduino-ide-extension/src/browser/style/settings-step-input.css b/arduino-ide-extension/src/browser/style/settings-step-input.css
index d2a5ce7db..dc298610e 100644
--- a/arduino-ide-extension/src/browser/style/settings-step-input.css
+++ b/arduino-ide-extension/src/browser/style/settings-step-input.css
@@ -12,7 +12,7 @@
     display: none;
     flex-direction: column;
     position: absolute;
-    right: 14px;
+    right: 0px;
     top: 50%;
     transform: translate(0px, -50%);
     height: calc(100% - 4px);
@@ -21,6 +21,10 @@
     background: var(--theia-input-background);
 }
 
+.settings-step-input-buttons-container-perc {
+    right: 14px;
+}
+
 .settings-step-input-container:hover > .settings-step-input-buttons-container {
     display: flex;
 }

From e32ed9c7af12e5221bd5aa74285f17631a440939 Mon Sep 17 00:00:00 2001
From: Alberto Iannaccone <a.iannaccone@arduino.cc>
Date: Tue, 18 Oct 2022 16:33:53 +0200
Subject: [PATCH 3/5] fix onBlur with empty strings

---
 .../dialogs/settings/settings-step-input.tsx      | 15 +++++++++++----
 .../src/browser/style/settings-step-input.css     | 10 +++++-----
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx b/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
index 10cfe5c76..7dc20cf27 100644
--- a/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
@@ -69,8 +69,16 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
   };
 
   /* Prevent the user from entering invalid values */
-  const onBlur = (): void => {
-    if ((currentValue === 0 && minValue > 0) || isNaN(currentValue)) {
+  const onBlur = (event: React.FocusEvent): void => {
+    if (event.currentTarget.contains(event.relatedTarget as Node)) {
+      return;
+    }
+
+    if (
+      (currentValue === 0 && minValue > 0) ||
+      isNaN(currentValue) ||
+      isEmptyString
+    ) {
       setValueState({
         currentValue: initialValue,
         isEmptyString: false,
@@ -95,12 +103,11 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
   const downDisabled = isDisabledException || currentValue <= minValue;
 
   return (
-    <div className="settings-step-input-container">
+    <div className="settings-step-input-container" onBlur={onBlur}>
       <input
         className={classnames('settings-step-input-element', classNames?.input)}
         value={isEmptyString ? '' : String(currentValue)}
         onChange={onUserInput}
-        onBlur={onBlur}
         type="number"
         pattern="[0-9]+"
       />
diff --git a/arduino-ide-extension/src/browser/style/settings-step-input.css b/arduino-ide-extension/src/browser/style/settings-step-input.css
index dc298610e..194dadc3c 100644
--- a/arduino-ide-extension/src/browser/style/settings-step-input.css
+++ b/arduino-ide-extension/src/browser/style/settings-step-input.css
@@ -2,10 +2,10 @@
     position: relative
 }
 
-.settings-step-input-element::-webkit-inner-spin-button, 
+.settings-step-input-element::-webkit-inner-spin-button,
 .settings-step-input-element::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+    -webkit-appearance: none;
+    margin: 0;
 }
 
 .settings-step-input-buttons-container {
@@ -25,7 +25,7 @@
     right: 14px;
 }
 
-.settings-step-input-container:hover > .settings-step-input-buttons-container {
+.settings-step-input-container:hover>.settings-step-input-buttons-container {
     display: flex;
 }
 
@@ -47,4 +47,4 @@
 
 .settings-step-input-button:hover {
     background: rgba(128, 128, 128, 0.8);
-}
+}
\ No newline at end of file

From a980e7e7989105b4ab5e9593d9b5e9d1c5051f70 Mon Sep 17 00:00:00 2001
From: Alberto Iannaccone <a.iannaccone@arduino.cc>
Date: Thu, 20 Oct 2022 08:52:36 +0200
Subject: [PATCH 4/5] always set the internal state value

---
 .../dialogs/settings/settings-step-input.tsx      | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx b/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
index 7dc20cf27..0ef2f0779 100644
--- a/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
@@ -37,6 +37,12 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
     return Math.min(Math.max(value, min), max);
   };
 
+  const setValidValue = (value: number): void => {
+    const clampedValue = clamp(value, minValue, maxValue);
+    setValueState({ currentValue: clampedValue, isEmptyString: false });
+    setSettingsStateValue(clampedValue);
+  };
+
   const onStep = (
     roundingOperation: 'ceil' | 'floor',
     stepOperation: (a: number, b: number) => number
@@ -47,9 +53,7 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
       valueRoundedToScale === currentValue
         ? stepOperation(currentValue, step)
         : valueRoundedToScale;
-    const newValue = clamp(calculatedValue, minValue, maxValue);
-
-    setSettingsStateValue(newValue);
+    setValidValue(calculatedValue);
   };
 
   const onStepUp = (): void => {
@@ -87,10 +91,7 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
     }
 
     if (currentValue !== initialValue) {
-      /* If the user input is a number, clamp it to the min and max values */
-      const newValue = clamp(currentValue, minValue, maxValue);
-
-      setSettingsStateValue(newValue);
+      setValidValue(currentValue);
     }
   };
 

From 8792a3980cc48bfea46ebf28e332bf231b9aca45 Mon Sep 17 00:00:00 2001
From: David Simpson <45690499+davegarthsimpson@users.noreply.github.com>
Date: Fri, 21 Oct 2022 10:44:25 +0200
Subject: [PATCH 5/5] misc fixes

---
 .../dialogs/settings/settings-step-input.tsx  | 34 +++++++++----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx b/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
index 0ef2f0779..1470ec192 100644
--- a/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
@@ -37,10 +37,11 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
     return Math.min(Math.max(value, min), max);
   };
 
-  const setValidValue = (value: number): void => {
-    const clampedValue = clamp(value, minValue, maxValue);
-    setValueState({ currentValue: clampedValue, isEmptyString: false });
-    setSettingsStateValue(clampedValue);
+  const resetToInitialState = (): void => {
+    setValueState({
+      currentValue: initialValue,
+      isEmptyString: false,
+    });
   };
 
   const onStep = (
@@ -53,7 +54,9 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
       valueRoundedToScale === currentValue
         ? stepOperation(currentValue, step)
         : valueRoundedToScale;
-    setValidValue(calculatedValue);
+    const newValue = clamp(calculatedValue, minValue, maxValue);
+
+    setSettingsStateValue(newValue);
   };
 
   const onStepUp = (): void => {
@@ -74,25 +77,20 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
 
   /* Prevent the user from entering invalid values */
   const onBlur = (event: React.FocusEvent): void => {
-    if (event.currentTarget.contains(event.relatedTarget as Node)) {
-      return;
-    }
-
     if (
-      (currentValue === 0 && minValue > 0) ||
-      isNaN(currentValue) ||
-      isEmptyString
+      (currentValue === initialValue && !isEmptyString) ||
+      event.currentTarget.contains(event.relatedTarget as Node)
     ) {
-      setValueState({
-        currentValue: initialValue,
-        isEmptyString: false,
-      });
       return;
     }
 
-    if (currentValue !== initialValue) {
-      setValidValue(currentValue);
+    const clampedValue = clamp(currentValue, minValue, maxValue);
+    if (clampedValue === initialValue || isNaN(currentValue) || isEmptyString) {
+      resetToInitialState();
+      return;
     }
+
+    setSettingsStateValue(clampedValue);
   };
 
   const valueIsNotWithinRange =