ComboGrid: open picker also when focusing an editable field

port commit
851c032d69ad5ae23725dd1add9e4084ebc12650
from pve-manager

commit message:

    ComboBoxes provided by UI frameworks normally show their selection
    possibilities once focused, ExtJS does this too but not on editable
    (and thus filterable) input fields. Add a logic which allows this too
    and streamlines the behavior of ComboGrid/Box like components.

    To avoid a glitch, where clicking the "picker trigger" (the down
    arrow which normally toggles the selection picker) would first focus
    the element - thus expanding it - and only then causing a toggle
    which collapses it again, we overwrite the 'Ext.form.trigger.Trigger'
    onMouseDown so that we can skip a expansion on this event.

    Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/form/ComboGrid.js b/form/ComboGrid.js
index b9fea19f02e00b65a1647ec912387e47ca068656..91650fd8b0bcf8b58692c4eb6ca4687d324667b1 100644 (file)
--- a/form/ComboGrid.js
+++ b/form/ComboGrid.js
@@ -272,6 +272,29 @@ Ext.define('Proxmox.form.ComboGrid', {
             me.createPicker();
         }
 
+       if (me.editable) {
+           // The trigger.picker causes first a focus event on the field then
+           // toggles the selection picker. Thus skip expanding in this case,
+           // else our focus listner expands and the picker.trigger then
+           // collapses it directly afterwards.
+           Ext.override(me.triggers.picker, {
+               onMouseDown : function (e) {
+                   // copied "should we focus" check from Ext.form.trigger.Trigger
+                   if (e.pointerType !== 'touch' && !this.field.owns(Ext.Element.getActiveElement())) {
+                       me.skip_expand_on_focus = true;
+                   }
+                   this.callParent(arguments);
+               }
+           });
+
+           me.on("focus", function(me) {
+               if (!me.isExpanded && !me.skip_expand_on_focus) {
+                   me.expand();
+               }
+               me.skip_expand_on_focus = false;
+           });
+       }
+
        me.mon(me.store, 'beforeload', function() {
            if (!me.isDisabled()) {
                me.enableLoadMask = true;