[pve-devel] [PATCH widget-toolkit 10/15] ComboGrid: open picker also when focusing an editable field

[Dominik Csapak]

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 at proxmox.com>

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 form/ComboGrid.js | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

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;
-- 
2.11.0