diff --git a/app/assets/javascripts/discourse/app/components/badge-title.js b/app/assets/javascripts/discourse/app/components/badge-title.js
index ab4acbeca5a..bda31c93af1 100644
--- a/app/assets/javascripts/discourse/app/components/badge-title.js
+++ b/app/assets/javascripts/discourse/app/components/badge-title.js
@@ -1,28 +1,37 @@
 import I18n from "I18n";
-import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import { ajax } from "discourse/lib/ajax";
 
 export default Component.extend({
   classNames: ["badge-title"],
 
+  selectedUserBadgeId: null,
+  selectableUserBadges: null,
   saved: false,
   saving: false,
 
-  @discourseComputed("selectableUserBadges", "selectedUserBadgeId")
-  selectedUserBadge(selectableUserBadges, selectedUserBadgeId) {
-    return selectableUserBadges.findBy("id", parseInt(selectedUserBadgeId, 10));
+  init() {
+    this._super(...arguments);
+
+    const badge = this.selectableUserBadges.findBy(
+      "badge.name",
+      this.currentUser.title
+    );
+    this.selectedUserBadgeId = badge ? badge.id : 0;
   },
 
   actions: {
     save() {
       this.setProperties({ saved: false, saving: true });
 
-      const badge_id = this.selectedUserBadgeId || 0;
+      const selectedUserBadge = this.selectableUserBadges.findBy(
+        "id",
+        this.selectedUserBadgeId
+      );
 
       ajax(this.currentUser.path + "/preferences/badge_title", {
         type: "PUT",
-        data: { user_badge_id: badge_id }
+        data: { user_badge_id: selectedUserBadge ? selectedUserBadge.id : 0 }
       }).then(
         () => {
           this.setProperties({
@@ -31,7 +40,7 @@ export default Component.extend({
           });
           this.currentUser.set(
             "title",
-            this.get("selectedUserBadge.badge.name")
+            selectedUserBadge ? selectedUserBadge.badge.name : ""
           );
         },
         () => {
diff --git a/app/assets/javascripts/discourse/app/controllers/badges/show.js b/app/assets/javascripts/discourse/app/controllers/badges/show.js
index 0ab92eac3fb..c96170277f8 100644
--- a/app/assets/javascripts/discourse/app/controllers/badges/show.js
+++ b/app/assets/javascripts/discourse/app/controllers/badges/show.js
@@ -21,6 +21,7 @@ export default Controller.extend({
   selectableUserBadges(filteredList) {
     return [
       EmberObject.create({
+        id: 0,
         badge: Badge.create({ name: I18n.t("badges.none") })
       }),
       ...filteredList.uniqBy("badge.name")
diff --git a/test/javascripts/components/badge-title-test.js b/test/javascripts/components/badge-title-test.js
index 7be26782699..d58bff7aefd 100644
--- a/test/javascripts/components/badge-title-test.js
+++ b/test/javascripts/components/badge-title-test.js
@@ -13,6 +13,7 @@ componentTest("badge title", {
     this.set("subject", selectKit());
     this.set("selectableUserBadges", [
       EmberObject.create({
+        id: 0,
         badge: { name: "(none)" }
       }),
       EmberObject.create({