diff --git a/app/assets/javascripts/discourse/app/components/emoji-picker.js b/app/assets/javascripts/discourse/app/components/emoji-picker.js
index 8a5dec83a65..36510e9a38a 100644
--- a/app/assets/javascripts/discourse/app/components/emoji-picker.js
+++ b/app/assets/javascripts/discourse/app/components/emoji-picker.js
@@ -211,10 +211,7 @@ export default Component.extend({
       return false;
     }
 
-    this.set(
-      "hoveredEmoji",
-      this._codeWithDiversity(event.target.title, this.selectedDiversity)
-    );
+    this._updateEmojiPreview(event.target.title);
   },
 
   @action
@@ -255,15 +252,11 @@ export default Component.extend({
 
     let currentEmoji;
 
-    this.set(
-      "hoveredEmoji",
-      this._codeWithDiversity(event.target.title, this.selectedDiversity)
-    );
-
     if (
       event.key === "ArrowDown" &&
       this._focusedOn(this.elements.searchInput)
     ) {
+      this._updateEmojiPreview(emojis[0].title);
       emojis[0].focus();
       event.preventDefault();
       return false;
@@ -306,8 +299,10 @@ export default Component.extend({
         let nextEmoji = currentEmoji + 1;
 
         if (nextEmoji < emojis.length) {
+          this._updateEmojiPreview(emojis[nextEmoji].title);
           emojis[nextEmoji].focus();
         } else if (nextEmoji >= emojis.length) {
+          this._updateEmojiPreview(emojis[0].title);
           emojis[0].focus();
         }
       }
@@ -315,6 +310,7 @@ export default Component.extend({
       if (event.key === "ArrowLeft") {
         const previousEmoji = currentEmoji - 1;
         if (currentEmoji > 0) {
+          this._updateEmojiPreview(emojis[previousEmoji].title);
           emojis[previousEmoji].focus();
         }
       }
@@ -329,7 +325,7 @@ export default Component.extend({
         const emojiBelow = [...emojis]
           .filter((c) => c.offsetTop > active.offsetTop)
           .find((c) => c.offsetLeft === active.offsetLeft);
-
+        this._updateEmojiPreview(emojiBelow.title);
         emojiBelow?.focus();
       }
 
@@ -343,8 +339,10 @@ export default Component.extend({
           .find((c) => c.offsetLeft === active.offsetLeft);
 
         if (emojiAbove) {
+          this._updateEmojiPreview(emojiAbove.title);
           emojiAbove.focus();
         } else {
+          this.set("hoveredEmoji", null);
           document.querySelector(this.elements.searchInput).focus();
         }
       }
@@ -467,6 +465,13 @@ export default Component.extend({
     );
   },
 
+  _updateEmojiPreview(title) {
+    return this.set(
+      "hoveredEmoji",
+      this._codeWithDiversity(title, this.selectedDiversity)
+    );
+  },
+
   @bind
   handleOutsideClick(event) {
     const emojiPicker = document.querySelector(".emoji-picker");