[pve-devel] [PATCH manager v2 4/4] ComboGrid: open picker also when focusing an editable field

[Thomas Lamprecht]

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

Changes v1 -> v2:
* only override and add focus event listener if we are editable
* improve comment and commit message

 www/manager6/form/ComboGrid.js | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/www/manager6/form/ComboGrid.js b/www/manager6/form/ComboGrid.js
index 18df7930..ee58c299 100644
--- a/www/manager6/form/ComboGrid.js
+++ b/www/manager6/form/ComboGrid.js
@@ -272,6 +272,29 @@ Ext.define('PVE.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