diff --git a/app/assets/javascripts/discourse/app/components/modal/create-account.hbs b/app/assets/javascripts/discourse/app/components/modal/create-account.hbs
index 4d52dfeea30..6f9c782195b 100644
--- a/app/assets/javascripts/discourse/app/components/modal/create-account.hbs
+++ b/app/assets/javascripts/discourse/app/components/modal/create-account.hbs
@@ -70,9 +70,11 @@
           </div>
 
           <div class="input-group create-account__username">
-            <Input
+            <input
               {{on "focusin" this.scrollInputIntoView}}
-              @value={{this.model.accountUsername}}
+              {{on "input" this.setAccountUsername}}
+              type="text"
+              value={{this.accountUsername}}
               disabled={{this.usernameDisabled}}
               maxlength={{this.maxUsernameLength}}
               aria-describedby="username-validation username-validation-more-info"
@@ -80,7 +82,7 @@
               autocomplete="off"
               name="username"
               id="new-account-username"
-              class={{value-entered this.model.accountUsername}}
+              class={{value-entered this.accountUsername}}
             />
             <label class="alt-placeholder" for="new-account-username">
               {{i18n "user.username.title"}}
@@ -114,7 +116,7 @@
             @name="create-account-before-password"
             @outletArgs={{hash
               accountName=this.model.accountName
-              accountUsername=this.model.accountUsername
+              accountUsername=this.accountUsername
               accountPassword=this.accountPassword
               userFields=this.userFields
               authOptions=this.model.authOptions
@@ -206,7 +208,7 @@
             @name="create-account-after-password"
             @outletArgs={{hash
               accountName=this.model.accountName
-              accountUsername=this.model.accountUsername
+              accountUsername=this.accountUsername
               accountPassword=this.accountPassword
               userFields=this.userFields
             }}
@@ -243,7 +245,7 @@
             @name="create-account-after-user-fields"
             @outletArgs={{hash
               accountName=this.model.accountName
-              accountUsername=this.model.accountUsername
+              accountUsername=this.accountUsername
               accountPassword=this.accountPassword
               userFields=this.userFields
             }}
diff --git a/app/assets/javascripts/discourse/app/components/modal/create-account.js b/app/assets/javascripts/discourse/app/components/modal/create-account.js
index effbea9e405..698a12716d5 100644
--- a/app/assets/javascripts/discourse/app/components/modal/create-account.js
+++ b/app/assets/javascripts/discourse/app/components/modal/create-account.js
@@ -1,3 +1,4 @@
+import { tracked } from "@glimmer/tracking";
 import { A } from "@ember/array";
 import Component from "@ember/component";
 import EmberObject, { action } from "@ember/object";
@@ -31,13 +32,14 @@ export default class CreateAccount extends Component.extend(
   @service siteSettings;
   @service login;
 
+  @tracked isDeveloper = false;
+  @tracked accountUsername = this.model.accountUsername;
   accountChallenge = 0;
   accountHoneypot = 0;
   formSubmitted = false;
   rejectedEmails = A();
   prefilledUsername = null;
   userFields = null;
-  isDeveloper = false;
   maskPassword = true;
   passwordValidationVisible = false;
   emailValidationVisible = false;
@@ -46,13 +48,11 @@ export default class CreateAccount extends Component.extend(
   @notEmpty("model.authOptions") hasAuthOptions;
   @setting("enable_local_logins") canCreateLocal;
   @setting("require_invite_code") requireInviteCode;
-
+  // For NameValidation mixin
+  @alias("model.accountName") accountName;
   // For UsernameValidation mixin
   @alias("model.authOptions") authOptions;
   @alias("model.accountEmail") accountEmail;
-  @alias("model.accountUsername") accountUsername;
-  // For NameValidation mixin
-  @alias("model.accountName") accountName;
 
   init() {
     super.init(...arguments);
@@ -70,6 +70,11 @@ export default class CreateAccount extends Component.extend(
     }
   }
 
+  @action
+  setAccountUsername(event) {
+    this.accountUsername = event.target.value;
+  }
+
   get nameTitle() {
     return this.nameValidationHelper.nameTitle;
   }
@@ -349,15 +354,14 @@ export default class CreateAccount extends Component.extend(
     if (this.prefilledUsername) {
       // If username field has been filled automatically, and email field just changed,
       // then remove the username.
-      if (this.model.accountUsername === this.prefilledUsername) {
-        this.set("model.accountUsername", "");
+      if (this.accountUsername === this.prefilledUsername) {
+        this.accountUsername = "";
       }
       this.set("prefilledUsername", null);
     }
     if (
       this.get("emailValidation.ok") &&
-      (isEmpty(this.model.accountUsername) ||
-        this.get("model.authOptions.email"))
+      (isEmpty(this.accountUsername) || this.get("model.authOptions.email"))
     ) {
       // If email is valid and username has not been entered yet,
       // or email and username were filled automatically by 3rd party auth,
@@ -416,7 +420,7 @@ export default class CreateAccount extends Component.extend(
       accountName: this.model.accountName,
       accountEmail: this.model.accountEmail,
       accountPassword: this.accountPassword,
-      accountUsername: this.model.accountUsername,
+      accountUsername: this.accountUsername,
       accountChallenge: this.accountChallenge,
       inviteCode: this.inviteCode,
       accountPasswordConfirm: this.accountHoneypot,
@@ -443,7 +447,7 @@ export default class CreateAccount extends Component.extend(
           return;
         }
 
-        this.set("isDeveloper", false);
+        this.isDeveloper = false;
         if (result.success) {
           // invalidate honeypot
           this._challengeExpiry = 1;
@@ -463,7 +467,7 @@ export default class CreateAccount extends Component.extend(
         } else {
           this.set("flash", result.message || i18n("create_account.failed"));
           if (result.is_developer) {
-            this.set("isDeveloper", true);
+            this.isDeveloper = true;
           }
           if (
             result.errors &&
diff --git a/app/assets/javascripts/discourse/app/controllers/invites-show.js b/app/assets/javascripts/discourse/app/controllers/invites-show.js
index 7fecf0a8a99..73a00c0f63c 100644
--- a/app/assets/javascripts/discourse/app/controllers/invites-show.js
+++ b/app/assets/javascripts/discourse/app/controllers/invites-show.js
@@ -1,3 +1,4 @@
+import { tracked } from "@glimmer/tracking";
 import Controller from "@ember/controller";
 import EmberObject, { action } from "@ember/object";
 import { dependentKeyCompat } from "@ember/object/compat";
@@ -21,9 +22,12 @@ export default class InvitesShowController extends Controller.extend(
   UsernameValidation,
   UserFieldsValidation
 ) {
+  @tracked accountUsername;
+  @tracked isDeveloper;
   queryParams = ["t"];
   nameValidationHelper = new NameValidationHelper(this);
-
+  successMessage = null;
+  @readOnly("model.is_invite_link") isInviteLink;
   @readOnly("model.invited_by") invitedBy;
   @alias("model.email") email;
   @alias("email") accountEmail;
@@ -34,17 +38,18 @@ export default class InvitesShowController extends Controller.extend(
   @alias("model.hidden_email") hiddenEmail;
   @alias("model.email_verified_by_link") emailVerifiedByLink;
   @alias("model.different_external_email") differentExternalEmail;
-  @alias("model.username") accountUsername;
   @not("externalAuthsOnly") passwordRequired;
-  @readOnly("model.is_invite_link") isInviteLink;
-
-  successMessage = null;
   errorMessage = null;
   userFields = null;
   authOptions = null;
   rejectedEmails = [];
   maskPassword = true;
 
+  @action
+  setAccountUsername(event) {
+    this.accountUsername = event.target.value;
+  }
+
   get nameTitle() {
     return this.nameValidationHelper.nameTitle;
   }
diff --git a/app/assets/javascripts/discourse/app/controllers/signup.js b/app/assets/javascripts/discourse/app/controllers/signup.js
index 42e37b37563..6a98f5f1c6f 100644
--- a/app/assets/javascripts/discourse/app/controllers/signup.js
+++ b/app/assets/javascripts/discourse/app/controllers/signup.js
@@ -1,3 +1,4 @@
+import { tracked } from "@glimmer/tracking";
 import { A } from "@ember/array";
 import Controller from "@ember/controller";
 import EmberObject, { action } from "@ember/object";
@@ -31,13 +32,14 @@ export default class SignupPageController extends Controller.extend(
   @service siteSettings;
   @service login;
 
+  @tracked accountUsername;
+  @tracked isDeveloper = false;
   accountChallenge = 0;
   accountHoneypot = 0;
   formSubmitted = false;
   rejectedEmails = A();
   prefilledUsername = null;
   userFields = null;
-  isDeveloper = false;
   maskPassword = true;
   passwordValidationVisible = false;
   emailValidationVisible = false;
@@ -256,6 +258,11 @@ export default class SignupPageController extends Controller.extend(
     });
   }
 
+  @action
+  setAccountUsername(event) {
+    this.accountUsername = event.target.value;
+  }
+
   @action
   togglePasswordValidation() {
     if (this.passwordValidation.reason) {
@@ -338,7 +345,7 @@ export default class SignupPageController extends Controller.extend(
       // If username field has been filled automatically, and email field just changed,
       // then remove the username.
       if (this.accountUsername === this.prefilledUsername) {
-        this.set("accountUsername", "");
+        this.accountUsername = "";
       }
       this.set("prefilledUsername", null);
     }
@@ -438,7 +445,7 @@ export default class SignupPageController extends Controller.extend(
           return;
         }
 
-        this.set("isDeveloper", false);
+        this.isDeveloper = false;
         if (result.success) {
           // invalidate honeypot
           this._challengeExpiry = 1;
@@ -458,7 +465,7 @@ export default class SignupPageController extends Controller.extend(
         } else {
           this.set("flash", result.message || i18n("create_account.failed"));
           if (result.is_developer) {
-            this.set("isDeveloper", true);
+            this.isDeveloper = true;
           }
           if (
             result.errors &&
diff --git a/app/assets/javascripts/discourse/app/mixins/username-validation.js b/app/assets/javascripts/discourse/app/mixins/username-validation.js
index ed2a87e44be..21d12770d7c 100644
--- a/app/assets/javascripts/discourse/app/mixins/username-validation.js
+++ b/app/assets/javascripts/discourse/app/mixins/username-validation.js
@@ -103,7 +103,7 @@ export default Mixin.create({
     }
 
     this.set("checkedUsername", this.accountUsername);
-    this.set("isDeveloper", !!result.is_developer);
+    this.isDeveloper = !!result.is_developer;
 
     if (result.available) {
       this.set(
diff --git a/app/assets/javascripts/discourse/app/routes/invites-show.js b/app/assets/javascripts/discourse/app/routes/invites-show.js
index 8743e8042e0..398195202d7 100644
--- a/app/assets/javascripts/discourse/app/routes/invites-show.js
+++ b/app/assets/javascripts/discourse/app/routes/invites-show.js
@@ -46,6 +46,7 @@ export default class InvitesShow extends DiscourseRoute {
 
   setupController(controller, model) {
     super.setupController(...arguments);
+    controller.accountUsername = model.username;
 
     if (model.user_fields) {
       controller.userFields.forEach((userField) => {
diff --git a/app/assets/javascripts/discourse/app/templates/invites/show.hbs b/app/assets/javascripts/discourse/app/templates/invites/show.hbs
index 49010cc7658..205c931f714 100644
--- a/app/assets/javascripts/discourse/app/templates/invites/show.hbs
+++ b/app/assets/javascripts/discourse/app/templates/invites/show.hbs
@@ -93,9 +93,11 @@
               {{/if}}
 
               <div class="input username-input input-group">
-                <Input
+                <input
                   {{on "focusin" this.scrollInputIntoView}}
-                  @value={{this.accountUsername}}
+                  {{on "input" this.setAccountUsername}}
+                  type="text"
+                  value={{this.accountUsername}}
                   class={{value-entered this.accountUsername}}
                   id="new-account-username"
                   name="username"
diff --git a/app/assets/javascripts/discourse/app/templates/signup.hbs b/app/assets/javascripts/discourse/app/templates/signup.hbs
index e68ddd160b7..ec54782d593 100644
--- a/app/assets/javascripts/discourse/app/templates/signup.hbs
+++ b/app/assets/javascripts/discourse/app/templates/signup.hbs
@@ -66,9 +66,11 @@
           </div>
 
           <div class="input-group create-account__username">
-            <Input
+            <input
               {{on "focusin" this.scrollInputIntoView}}
-              @value={{this.accountUsername}}
+              {{on "input" this.setAccountUsername}}
+              type="text"
+              value={{this.accountUsername}}
               disabled={{this.usernameDisabled}}
               maxlength={{this.maxUsernameLength}}
               aria-describedby="username-validation username-validation-more-info"