A delay added to CMS side menu tab change event to avoid the annoying unexpected menu changes while moving mouse arround

modules/backend/assets/js/october.sidepaneltab.js

@@ -12,6 +12,8 @@
 
     SidePanelTab.prototype.init = function() {
         var self = this
+        this.tabOpenDelay = 200
+        this.tabOpenTimeout = undefined
         this.$sideNavItems = $('#layout-sidenav ul li')
         this.$sidePanelItems = $('[data-content-id]', this.$el)
         this.sideNavWidth = $('#layout-sidenav ul li').outerWidth()
@@ -51,10 +53,19 @@
             })
 
             self.$sideNavItems.mouseenter(function(){
-                if ($(window).width() < self.options.breakpoint || !self.panelFixed())
-                    self.displayTab(this)
+                if ($(window).width() < self.options.breakpoint || !self.panelFixed()) {
+                    var _this = this
+                    self.tabOpenTimeout = setTimeout(function () {
+                        self.displayTab(_this)
+                    }, self.tabOpenDelay)
+                }
             })
 
+            self.$sideNavItems.mouseleave(function (){
+                clearTimeout(self.tabOpenTimeout)
+            })
+
+
             $(window).resize(function() {
                 self.updatePanelPosition()
                 self.updateActiveTab()