diff --git a/app/assets/javascripts/discourse/app/components/emoji-picker.js b/app/assets/javascripts/discourse/app/components/emoji-picker.js
index 3c0f3c8546..a9cb0df860 100644
--- a/app/assets/javascripts/discourse/app/components/emoji-picker.js
+++ b/app/assets/javascripts/discourse/app/components/emoji-picker.js
@@ -43,7 +43,6 @@ export default Component.extend({
     this._super(...arguments);
 
     this.set("customEmojis", customEmojis());
-    this.set("recentEmojis", this.emojiStore.favorites);
     this.set("selectedDiversity", this.emojiStore.diversity);
 
     if ("IntersectionObserver" in window) {
@@ -80,6 +79,7 @@ export default Component.extend({
   @action
   onShow() {
     this.set("isLoading", true);
+    this.set("recentEmojis", this.emojiStore.favorites);
 
     schedule("afterRender", () => {
       document.addEventListener("click", this.handleOutsideClick);
@@ -198,9 +198,9 @@ export default Component.extend({
 
     this.emojiSelected(code);
 
-    if (!img.parentNode.parentNode.classList.contains("recent")) {
-      this._trackEmojiUsage(code);
-    }
+    this._trackEmojiUsage(code, {
+      refresh: !img.parentNode.parentNode.classList.contains("recent"),
+    });
 
     if (this.site.isMobileDevice) {
       this.onClose();
@@ -244,9 +244,12 @@ export default Component.extend({
     }
   },
 
-  _trackEmojiUsage(code) {
+  _trackEmojiUsage(code, options = {}) {
     this.emojiStore.track(code);
-    this.set("recentEmojis", this.emojiStore.favorites.slice(0, 10));
+
+    if (options.refresh) {
+      this.set("recentEmojis", [...this.emojiStore.favorites]);
+    }
   },
 
   _replaceEmoji(code) {
diff --git a/app/assets/javascripts/discourse/tests/acceptance/emoji-picker-test.js b/app/assets/javascripts/discourse/tests/acceptance/emoji-picker-test.js
index 490ffac456..2458bbcd6b 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/emoji-picker-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/emoji-picker-test.js
@@ -127,6 +127,35 @@ acceptance("EmojiPicker", function (needs) {
     );
   });
 
+  test("updates the recent list when selecting from it (after you close re-open it or select other emoji)", async function (assert) {
+    await visit("/t/internationalization-localization/280");
+    await click("#topic-footer-buttons .btn.create");
+    await click("button.emoji.btn");
+    await click(`.emoji-picker-emoji-area img.emoji[title="sunglasses"]`);
+    await click(`.emoji-picker-emoji-area img.emoji[title="grinning"]`);
+
+    let recent = queryAll(".section.recent .section-group img.emoji");
+    assert.strictEqual(recent[0].title, "grinning");
+    assert.strictEqual(recent[1].title, "sunglasses");
+
+    await click(
+      `.section[data-section="recent"] .section-group img.emoji[title="sunglasses"]`
+    );
+
+    // The order is still the same
+    recent = queryAll(".section.recent .section-group img.emoji");
+    assert.strictEqual(recent[0].title, "grinning");
+    assert.strictEqual(recent[1].title, "sunglasses");
+
+    await click("button.emoji.btn");
+    await click("button.emoji.btn");
+
+    // but updates when you re-open
+    recent = queryAll(".section.recent .section-group img.emoji");
+    assert.strictEqual(recent[0].title, "sunglasses");
+    assert.strictEqual(recent[1].title, "grinning");
+  });
+
   test("emoji picker persists state", async function (assert) {
     await visit("/t/internationalization-localization/280");
     await click("#topic-footer-buttons .btn.create");