[pve-devel] [PATCH widget-toolkit/manager] fix focus/tbar selection issues in ComboGrid

[pve-devel] [PATCH widget-toolkit/manager] fix focus/tbar selection issues in ComboGrid

[Dominik Csapak]

these two patches fix two issues regarding the combobox and the
ComboBoxSetStoreNode. The widget-toolkit patch is necessary to avoid
glitches after the second patch, but independently fixes also the
behaviour described in that commit message.

proxmox-widget-toolkit:

Dominik Csapak (1):
  ComboGrid: avoid needing two clicks after reselecting an item

 src/form/ComboGrid.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

manager:

Dominik Csapak (1):
  ui: ComboBoxSetStoreNode: don't hide the picker when clicking the
    toolbar

 www/manager6/form/ComboBoxSetStoreNode.js | 30 +++++++++++++++++++++++
 1 file changed, 30 insertions(+)

-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 1/1] ComboGrid: avoid needing two clicks after reselecting an item

[Dominik Csapak]

'picker.hide()' hides the picker, but does not do everything to properly
keep track of the picker state in the combobox class.

This lead to a bug when we reselected an entry, we had to click the
picker again twice to open it again.

Use the 'collapse' method of the combobox instead, which does the
necessary book-keeping.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/form/ComboGrid.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/form/ComboGrid.js b/src/form/ComboGrid.js
index ba3ce40..29c3d26 100644
--- a/src/form/ComboGrid.js
+++ b/src/form/ComboGrid.js
@@ -290,7 +290,7 @@ Ext.define('Proxmox.form.ComboGrid', {
 	if (!me.multiSelect) {
 	    picker.on('itemclick', function(sm, record) {
 		if (picker.getSelection()[0] === record) {
-		    picker.hide();
+		    me.collapse();
 		}
 	    });
 	}
-- 
2.30.2

[pve-devel] applied: [PATCH widget-toolkit 1/1] ComboGrid: avoid needing two clicks after reselecting an item

[Thomas Lamprecht]

Am 27/01/2023 um 11:14 schrieb Dominik Csapak:
> 'picker.hide()' hides the picker, but does not do everything to properly
> keep track of the picker state in the combobox class.
> 
> This lead to a bug when we reselected an entry, we had to click the
> picker again twice to open it again.
> 
> Use the 'collapse' method of the combobox instead, which does the
> necessary book-keeping.
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  src/form/ComboGrid.js | 2 +-
>  1 file changed, 1 insertion(+), 1 deletion(-)
> 
>

applied, thanks!

[pve-devel] [PATCH manager 1/1] ui: ComboBoxSetStoreNode: don't hide the picker when clicking the toolbar

[Dominik Csapak]

When clicking the toolbar of the ComboGrid, the combobox loses focus,
and instantly hides the picker.

To prevent that, we keep track of the mousedown event on the toolbar
(which happily comes before the focusLeave event), and prevent the
focusLeave propagation in that case.

Then on mouseup, we focus the combobox again, so that the nexct
focusLeave can trigger again.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/form/ComboBoxSetStoreNode.js | 30 +++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/www/manager6/form/ComboBoxSetStoreNode.js b/www/manager6/form/ComboBoxSetStoreNode.js
index a654636b7..a127af3a5 100644
--- a/www/manager6/form/ComboBoxSetStoreNode.js
+++ b/www/manager6/form/ComboBoxSetStoreNode.js
@@ -29,6 +29,30 @@ Ext.define('PVE.form.ComboBoxSetStoreNode', {
 	me.fireEvent('nodechanged', value);
     },
 
+    tbarMouseDown: function() {
+	this.mousePressed = true;
+    },
+
+    tbarMouseUp: function() {
+	let me = this;
+	delete this.mousePressed;
+	if (me.focusLeft) {
+	    me.focus();
+	    delete me.focusLeft;
+	}
+    },
+
+    // conditionally prevent the focusLeave handler to continue, preventing collapsing of the picker
+    onFocusLeave: function() {
+	let me = this;
+	me.focusLeft = true;
+	if (!me.mousePressed) {
+	    me.callParent(arguments);
+	}
+
+	return undefined;
+    },
+
     initComponent: function() {
 	let me = this;
 
@@ -37,6 +61,12 @@ Ext.define('PVE.form.ComboBoxSetStoreNode', {
 	    Ext.apply(me.listConfig ?? {}, {
 		tbar: {
 		    xtype: 'toolbar',
+		    listeners: {
+			mousedown: me.tbarMouseDown,
+			mouseup: me.tbarMouseUp,
+			element: 'el',
+			scope: me,
+		    },
 		    items: [
 			{
 			    xtype: "pveStorageScanNodeSelector",
-- 
2.30.2

[pve-devel] applied: [PATCH manager 1/1] ui: ComboBoxSetStoreNode: don't hide the picker when clicking the toolbar

[Thomas Lamprecht]

Am 27/01/2023 um 11:14 schrieb Dominik Csapak:
> When clicking the toolbar of the ComboGrid, the combobox loses focus,
> and instantly hides the picker.
> 
> To prevent that, we keep track of the mousedown event on the toolbar
> (which happily comes before the focusLeave event), and prevent the
> focusLeave propagation in that case.
> 
> Then on mouseup, we focus the combobox again, so that the nexct
> focusLeave can trigger again.
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  www/manager6/form/ComboBoxSetStoreNode.js | 30 +++++++++++++++++++++++
>  1 file changed, 30 insertions(+)
> 
>

applied, thanks!