From: Dominik Csapak <d.csapak@proxmox.com>
Date: Mon, 8 Jan 2018 12:03:00 +0000 (+0100)
Subject: ComboGrid: open picker also when focusing an editable field
X-Git-Url: https://git.proxmox.com/?a=commitdiff_plain;h=39d9914990920758306edd2c9804b034eaa74e41;p=proxmox-widget-toolkit.git

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 b9fea19..91650fd 100644
--- 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;