diff --git a/CHANGELOG.md b/CHANGELOG.md
index e493953..8294183 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,8 @@
   - Build workflow broke due to using `yarn dlx vsce` and an `vsce` major version update requiring Node 14
   - The workflow is now configured to use Node 14 instead of Node 12
   - `vsce` is now added as a `devDependency`, which will also result in a speedup due to Yarn caching
+- The `FieldNumber` component in the webview now doesn't always default to `22` as value
+  - This component is only used for the `port` field, which now passes `22` to `FieldNumber` by default
 
 ## v1.24.0 (2021-11-02)
 
diff --git a/webview/src/ConfigEditor/fields.tsx b/webview/src/ConfigEditor/fields.tsx
index 19e924d..3a57beb 100644
--- a/webview/src/ConfigEditor/fields.tsx
+++ b/webview/src/ConfigEditor/fields.tsx
@@ -65,7 +65,7 @@ export function host(config: FileSystemConfig, onChange: FSCChanged<'host'>): Re
 export function port(config: FileSystemConfig, onChange: FSCChanged<'port'>): React.ReactElement {
   const callback = (value: number) => onChange('port', value);
   const description = 'Port number of the server. Supports environment variables, e.g. $PORT';
-  return <FieldNumber key="port" label="Port" value={config.port} onChange={callback} optional description={description} />
+  return <FieldNumber key="port" label="Port" value={config.port || 22} onChange={callback} optional description={description} />
 }
 
 export function root(config: FileSystemConfig, onChange: FSCChanged<'root'>): React.ReactElement {
diff --git a/webview/src/FieldTypes/number.tsx b/webview/src/FieldTypes/number.tsx
index f70482a..c827a94 100644
--- a/webview/src/FieldTypes/number.tsx
+++ b/webview/src/FieldTypes/number.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { FieldBase } from './base';
 
-export class FieldNumber extends FieldBase<number | undefined> {
+export class FieldNumber extends FieldBase<number> {
     public renderInput() {
-        return <input value={this.state.newValue || 22} onChange={this.onChangeEvent} type="number" />;
+        return <input value={this.state.newValue} onChange={this.onChangeEvent} type="number" />;
     }
     public getError() {
         const { newValue } = this.state;