Fix up potential for build finish event to fire for wrong menu

2 files changed, 4 insertions, 5 deletions

diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index d7beb246288..4667980a960 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -154,8 +154,7 @@ AwardsHandler.prototype.showEmojiMenu = function showEmojiMenu($addBtn) {
 };
 
 // Create the emoji menu with the first category of emojis.
-// Then after the emoji menu has been expanded(and CSS transition has ended),
-// render the remaining categories of emojis one by one to avoid jank.
+// Then render the remaining categories of emojis one by one to avoid jank.
 AwardsHandler.prototype.createEmojiMenu = function createEmojiMenu(callback) {
   if (this.isCreatingEmojiMenu) {
     return;
@@ -199,7 +198,8 @@ AwardsHandler
 
     // Avoid the jank and render the remaining categories separately
     // This will take more time, but makes UI more responsive
-    const emojiContentElement = document.querySelector('.emoji-menu .emoji-menu-content');
+    const menu = document.querySelector('.emoji-menu');
+    const emojiContentElement = menu.querySelector('.emoji-menu-content');
     const remainingCategories = Object.keys(categoryMap).slice(1);
     const allCategoriesAddedPromise = remainingCategories.reduce(
       (promiseChain, categoryNameKey) =>
@@ -222,7 +222,6 @@ AwardsHandler
     allCategoriesAddedPromise.then(() => {
       // Used for tests
       // We check for the menu in case it was destroyed in the meantime
-      const menu = document.querySelector('.emoji-menu');
       if (menu) {
         menu.dispatchEvent(new CustomEvent('build-emoji-menu-finish'));
       }
diff --git a/spec/javascripts/awards_handler_spec.js b/spec/javascripts/awards_handler_spec.js
index 8b35cd8e5be..f4b1d777203 100644
--- a/spec/javascripts/awards_handler_spec.js
+++ b/spec/javascripts/awards_handler_spec.js
@@ -216,7 +216,7 @@ const AwardsHandler = require('~/awards_handler');
       });
     });
     describe('emoji menu', function() {
-      const emojiSelector = '[data-name=sunglasses]';
+      const emojiSelector = '[data-name="sunglasses"]';
       const openEmojiMenuAndAddEmoji = function() {
         return openAndWaitForEmojiMenu()
           .then(() => {