Moves the Initialisation of the frequent Item Dropdowns to Idle Callback

2 files changed, 10 insertions, 1 deletions

diff --git a/app/assets/javascripts/frequent_items/components/app.vue b/app/assets/javascripts/frequent_items/components/app.vue
index 63531f1f246..3b8f7ca9e07 100644
--- a/app/assets/javascripts/frequent_items/components/app.vue
+++ b/app/assets/javascripts/frequent_items/components/app.vue
@@ -47,6 +47,11 @@ export default {
     }
 
     eventHub.$on(`${this.namespace}-dropdownOpen`, this.dropdownOpenHandler);
+
+    // As we init it through requestIdleCallback it could be that the dropdown is already open
+    if (document.getElementById(`nav-${this.namespace}-dropdown`).classList.contains('show')) {
+      this.dropdownOpenHandler();
+    }
   },
   beforeDestroy() {
     eventHub.$off(`${this.namespace}-dropdownOpen`, this.dropdownOpenHandler);
diff --git a/app/assets/javascripts/frequent_items/index.js b/app/assets/javascripts/frequent_items/index.js
index 5157ff211dc..7f90f673a82 100644
--- a/app/assets/javascripts/frequent_items/index.js
+++ b/app/assets/javascripts/frequent_items/index.js
@@ -17,7 +17,7 @@ const frequentItemDropdowns = [
   },
 ];
 
-document.addEventListener('DOMContentLoaded', () => {
+function initFrequentItemDropdowns() {
   frequentItemDropdowns.forEach(dropdown => {
     const { namespace, key } = dropdown;
     const el = document.getElementById(`js-${namespace}-dropdown`);
@@ -66,4 +66,8 @@ document.addEventListener('DOMContentLoaded', () => {
       },
     });
   });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  requestIdleCallback(initFrequentItemDropdowns);
 });