input panel: improve validity change check for advanced fields

instead of only checking the validity of the advanced items when the
form validity changed as a whole, add a validity change listener to
each field in the advanced section.

This improves the behaviour such that every time an advanced field
gets invalid the items are show, not only when the form was valid
before.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
Tested-By: Aaron Lauterer <a.lauterer@proxmox.com>
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/src/window/Edit.js b/src/window/Edit.js
index 51ebfa5f87958f65dd7cc1d7b5202a9ec6313a7b..7f94e3096eda4da635f5af02d572f7dc98bb3245 100644 (file)
--- a/src/window/Edit.js
+++ b/src/window/Edit.js
@@ -318,21 +318,6 @@ Ext.define('Proxmox.window.Edit', {
            let dirty = form.isDirty();
            submitBtn.setDisabled(!valid || !(dirty || me.isCreate));
            resetBtn.setDisabled(!dirty);
-
-           if (inputPanel && inputPanel.hasAdvanced) {
-               // we want to show the advanced options as soon as some of it is not valid
-               let advancedItems = me.down('#advancedContainer').query('field');
-               let allAdvancedValid = true;
-               advancedItems.forEach(function(field) {
-                   if (!field.isValid()) {
-                       allAdvancedValid = false;
-                   }
-               });
-
-               if (!allAdvancedValid) {
-                   inputPanel.setAdvancedVisible(true);
-               }
-           }
        };
 
        form.on('dirtychange', set_button_status);
@@ -395,6 +380,18 @@ Ext.define('Proxmox.window.Edit', {
 
        me.callParent();
 
+
+       if (inputPanel?.hasAdvanced) {
+           let advancedItems = inputPanel.down('#advancedContainer').query('field');
+           advancedItems.forEach(function(field) {
+               me.mon(field, 'validitychange', (f, valid) => {
+                   if (!valid) {
+                       f.up('inputpanel').setAdvancedVisible(true);
+                   }
+               });
+           });
+       }
+
        // always mark invalid fields
        me.on('afterlayout', function() {
            // on touch devices, the isValid function