Fix that graphs disappear after using form controls (#5182)

public/js/icinga.js

@@ -64,6 +64,11 @@
          */
         this.behaviors = {};
 
+        /**
+         * Site behaviors which hook into the rendering process
+         */
+        this.renderHooks = [];
+
         /**
          * Loaded modules
          */
@@ -94,9 +99,20 @@
             this.loader     = new Icinga.Loader(this);
             this.events     = new Icinga.Events(this);
             this.history    = new Icinga.History(this);
-            var _this = this;
-            $.each(Icinga.Behaviors, function(name, Behavior) {
-                _this.behaviors[name.toLowerCase()] = new Behavior(_this);
+
+            // Initialize all available behaviors
+            for (const name in Icinga.Behaviors) {
+                const behavior = new Icinga.Behaviors[name](this);
+                this.behaviors[name.toLowerCase()] = behavior;
+                if (behavior.renderHook) {
+                    this.renderHooks.push(behavior);
+                }
+            }
+
+            // Sort render hooks by priority
+            this.renderHooks.sort(function (a, b) {
+                // Treats all hooks without a priority as "greater", meaning they will be applied last
+                return (a.priority || 999) - (b.priority || 999);
             });
 
             this.timezone.initialize();

public/js/icinga/behavior/detach.js

@@ -11,6 +11,8 @@
 
     function Detach(icinga) {
         Icinga.EventListener.call(this, icinga);
+
+        this.priority = 2;
     }
 
     Detach.prototype = new Icinga.EventListener();

public/js/icinga/behavior/form.js

@@ -13,6 +13,8 @@
         Icinga.EventListener.call(this, icinga);
         this.on('rendered', '.container', this.onRendered, this);
 
+        this.priority = 1;
+
         // store the modification state of all input fields
         this.inputs = new WeakMap();
     };
@@ -76,13 +78,13 @@
             return null;
         }
 
-        var origFocus = document.activeElement;
-        var containerId = $container.attr('id');
-        if ($container.has(origFocus).length
-            && $(origFocus).length
-            && ! $(origFocus).hasClass('autofocus')
-            && $(origFocus).closest('form').length
-            && $(origFocus).not(':input[type=button], :input[type=submit], :input[type=reset]').length
+        const origFocus = document.activeElement;
+        const containerId = $container.attr('id');
+        if ($container[0].contains(origFocus)
+            && origFocus.form
+            && ! origFocus.matches(
+                'input[type=submit], input[type=reset], input[type=button], .autofocus, .autosubmit:not(:hover)'
+            )
         ) {
             this.icinga.logger.debug('Not changing content for ' + containerId + ' form has focus');
             return null;

public/js/icinga/loader.js

@@ -1267,17 +1267,16 @@
 
             $container.trigger('beforerender', [content, action, autorefresh, scripted, autoSubmit]);
 
-            var discard = false;
-            $.each(_this.icinga.behaviors, function(name, behavior) {
-                if (behavior.renderHook) {
-                    var changed = behavior.renderHook(content, $container, action, autorefresh, autoSubmit);
-                    if (changed === null) {
-                        discard = true;
-                    } else {
-                        content = changed;
-                    }
+            let discard = false;
+            for (const hook of _this.icinga.renderHooks) {
+                const changed = hook.renderHook(content, $container, action, autorefresh, autoSubmit);
+                if (changed === null) {
+                    discard = true;
+                    break;
+                } else {
+                    content = changed;
                 }
-            });
+            }
 
             $('.container', $container).each(function() {
                 _this.stopPendingRequestsFor($(this));