diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
index ead4b8a229..e0187e504b 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
@@ -771,6 +771,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
               >
                 <input
                   class="input box grow"
+                  max="50"
                   min="10"
                   spellcheck="false"
                   type="number"
diff --git a/src/renderer/components/+preferences/terminal.tsx b/src/renderer/components/+preferences/terminal.tsx
index eafe4e9894..57c3ad6394 100644
--- a/src/renderer/components/+preferences/terminal.tsx
+++ b/src/renderer/components/+preferences/terminal.tsx
@@ -72,7 +72,7 @@ const NonInjectedTerminal = observer((
           <Input
             theme="round-black"
             placeholder={defaultShell}
-            value={userStore.shell}
+            value={userStore.shell ?? ""}
             onChange={(value) => userStore.shell = value}
           />
         </section>
diff --git a/src/renderer/components/input/input.tsx b/src/renderer/components/input/input.tsx
index 3056a304f9..9514e796e3 100644
--- a/src/renderer/components/input/input.tsx
+++ b/src/renderer/components/input/input.tsx
@@ -265,25 +265,24 @@ export class Input extends React.Component<InputProps, State> {
   setDirtyOnChange = debounce(() => this.setDirty(), 500);
 
   async onChange(evt: React.ChangeEvent<any>) {
-    this.autoFitHeight();
-    this.setDirtyOnChange();
-
-    // re-render component when used as uncontrolled input
-    // when used @defaultValue instead of @value changing real input.value doesn't call render()
-    if (this.isUncontrolled && this.showMaxLenIndicator) {
-      this.forceUpdate();
-    }
-
     const newValue = evt.currentTarget.value;
     const eventCopy = { ...evt };
 
-    await this.validate(); // validate first
+    this.autoFitHeight();
+    this.setDirtyOnChange();
 
-    // don't propagate changes for invalid values
-    // possible only with uncontrolled components (defaultValue={} must be used instead value={})
-    if (!this.isUncontrolled || (this.isUncontrolled && this.state.valid)) {
-      this.props.onChange?.(newValue, eventCopy);
+    // Handle uncontrolled components (`props.defaultValue` must be used instead `value`)
+    if (this.isUncontrolled) {
+      // update DOM since render() is not called on input's changes with uncontrolled inputs
+      if (this.showMaxLenIndicator) this.forceUpdate();
+
+      // don't propagate changes for invalid values
+      await this.validate();
+      if (!this.state.valid) return; // skip
     }
+
+    // emit new value update
+    this.props.onChange?.(newValue, eventCopy);
   }
 
   onKeyDown(evt: React.KeyboardEvent<InputElement>) {