Help needed on issue #547: ExtJs issue selecting property grid cell (WMS source management)

[Stefano Costa]

Hi all,

I struggled with issue #547 quite a bit today, but couldn't come up with a reasonable solution.

Following the instructions reported in the issue description, I was able to reproduce the bug easily. After a lot of trial-and-error, I concluded that the weird shift up of the view is triggered by a call to the DOM API method focus() on the cell's editor input element (happens only for TextFields, not ComboBoxes).

In order to see this, follow the procedure detailed in the issue and the grid editor for the newly added parameter should generate HTML markup similar to this:

<div class="x-layer x-editor x-small-editor x-grid-editor" id="ext-comp-1083" style="position: absolute; z-index: 11000; visibility: hidden; left: -10000px; top: -10000px; overflow: hidden;">

    <input type="text" size="20" autocomplete="off" id="ext-comp-1082" name="" class="x-form-text x-form-field" style="width: 100px; height: 14px;">

</div>

Then, run this JS code in Chrome's DevTools Console:

var ed = document.getElementById("ext-comp-1083");

var inp = document.getElementById("ext-comp-1082");

// make grid editor visible

ed.style.left = "112px";

ed.style.top = "48px";

ed.style.visibility = "visible";

inp.focus(); // the entire PropertyGrid should shift up!

The weirdest thing is that the shift occurs when input.focus() is called, but it does NOT occur if the user clicks inside the input field.

Now, I have no clue why this is happening, nor I have any idea of how to solve the issue, except the rather brutal approach of commenting out all lines calling field.focus() in Ext.grid.EditorGridPanel and Ext.Editor (I tried and it works)...

Any ideas?

Thanks for the help,

--SC

[Mauro Bartolomeoli]

Hi Stefano,

2015-02-26 0:29 GMT+01:00 Stefano Costa <ridethe...@gmail.com>:

Hi all,

I struggled with issue #547 quite a bit today, but couldn't come up with a reasonable solution.

Following the instructions reported in the issue description, I was able to reproduce the bug easily. After a lot of trial-and-error, I concluded that the weird shift up of the view is triggered by a call to the DOM API method focus() on the cell's editor input element (happens only for TextFields, not ComboBoxes).

In order to see this, follow the procedure detailed in the issue and the grid editor for the newly added parameter should generate HTML markup similar to this:

<div class="x-layer x-editor x-small-editor x-grid-editor" id="ext-comp-1083" style="position: absolute; z-index: 11000; visibility: hidden; left: -10000px; top: -10000px; overflow: hidden;">

    <input type="text" size="20" autocomplete="off" id="ext-comp-1082" name="" class="x-form-text x-form-field" style="width: 100px; height: 14px;">

</div>

Then, run this JS code in Chrome's DevTools Console:

var ed = document.getElementById("ext-comp-1083");

var inp = document.getElementById("ext-comp-1082");

// make grid editor visible

ed.style.left = "112px";

ed.style.top = "48px";

ed.style.visibility = "visible";

inp.focus(); // the entire PropertyGrid should shift up!

My guess is that some DOM element is changing its scrollTop value due to the input taking focus. This seems to be a chrome issue, but since we need to workaround it what I would do is:

1) trying to investigate if this is the case and which DOM element is scrolled

2) wraparound all instances of inp.focus() with scrollTop value save / restore

If your investigation does not confirm that this is the case, I would do a local patch for the plugin where the issue is happening (via subclassing / overriding of the affected code, I suppose EditorGridPanel and Editor is enough).

Note: what do we lose if we comment inp.focus() as you suggest? Is the textfield focused anyway?

Thanks

Mauro

--

==
GeoServer Professional Services from the experts! Visit
http://goo.gl/NWWaa2 for more information.
==

Dott. Mauro Bartolomeoli

@mauro_bart

Senior Software Engineer

GeoSolutions S.A.S.

Via Poggio alle Viti 1187

55054  Massarosa (LU)

Italy

phone: +39 0584 962313

fax:     +39 0584 1660272

http://www.geo-solutions.it

http://twitter.com/geosolutions_it

-------------------------------------------------------

AVVERTENZE AI SENSI DEL D.Lgs. 196/2003

Le informazioni contenute in questo messaggio di posta elettronica e/o nel/i file/s allegato/i sono da considerarsi strettamente riservate. Il loro utilizzo è consentito esclusivamente al destinatario del messaggio, per le finalità indicate nel messaggio stesso. Qualora riceviate questo messaggio senza esserne il destinatario, Vi preghiamo cortesemente di darcene notizia via e-mail e di procedere alla distruzione del messaggio stesso, cancellandolo dal Vostro sistema. Conservare il messaggio stesso, divulgarlo anche in parte, distribuirlo ad altri soggetti, copiarlo, od utilizzarlo per finalità diverse, costituisce comportamento contrario ai principi dettati dal D.Lgs. 196/2003.

 

The information in this message and/or attachments, is intended solely for the attention and use of the named addressee(s) and may be confidential or proprietary in nature or covered by the provisions of privacy act (Legislative Decree June, 30 2003, no.196 - Italy's New Data Protection Code).Any use not in accord with its purpose, any disclosure, reproduction, copying, distribution, or either dissemination, either whole or partial, is strictly forbidden except previous formal approval of the named addressee(s). If you are not the intended recipient, please contact immediately the sender by telephone, fax or e-mail and delete the information in this message that has been received in error. The sender does not give any warranty or accept liability as the content, accuracy or completeness of sent messages and accepts no responsibility  for changes made after they were sent or for other risks which arise as a result of e-mail transmission, viruses, etc.

[Stefano Costa]

Hi Mauro,

On Thu, Feb 26, 2015 at 9:52 AM, Mauro Bartolomeoli <mauro.bar...@geo-solutions.it> wrote:

Hi Stefano,

My guess is that some DOM element is changing its scrollTop value due to the input taking focus. This seems to be a chrome issue, but since we need to workaround it what I would do is:

1) trying to investigate if this is the case and which DOM element is scrolled

2) wraparound all instances of inp.focus() with scrollTop value save / restore

You are indeed correct! Inspecting the grid's markup, I found a nested div element whose scrollTop value changes from 0 to 12 when I call input.focus(): the element can be retrieved with this code:

propertyGrid.getGridEl().child(".x-grid3")

I then tried to to what you suggested registering a couple of listeners on the cell editor to save and restore the scrollTop value and... it kinda worked, but I could still see a weird up-and-down movement in the grid. Plus, it did not solve the issue of the entire viewport scrolling up in some cases.

So, I took another approach and registered this afterrender listener on the PropertyGrid:

afterrender: function(propertyGrid) {

// replace focus() function on relevant grid editors

// (workaround for issue #547: https://github.com/geosolutions-it/MapStore/issues/547

var cm = propertyGrid.getColumnModel();

for (var fieldType in cm.editors) {

var editor = cm.editors[fieldType];

if (Ext.isChrome && (fieldType == 'date' || fieldType == 'string' || fieldType == 'number')) {

editor.field.focus = Ext.emptyFn;

}

}

}

Basically, I'm replacing the focus() function with the empty function on all editors making use of a TextField (or one of its subclasses). This works quite well, the problem is gone; the only drawback is that you need to click twice on the grid cell you want to edit to actually gain focus.

Note: what do we lose if we comment inp.focus() as you suggest? Is the textfield focused anyway?

As I said earlier, yes, the textfield can be focused anyway clicking twice on the grid cell to edit.

Do you think all this madness makes for an acceptable workaround? ;-)

Thanks,

--SC

 

Thanks

Mauro

--

==
GeoServer Professional Services from the experts! Visit
http://goo.gl/NWWaa2 for more information.
==

Dott. Mauro Bartolomeoli

@mauro_bart

Senior Software Engineer

GeoSolutions S.A.S.

Via Poggio alle Viti 1187

55054  Massarosa (LU)

Italy

phone: +39 0584 962313

fax:     +39 0584 1660272

http://www.geo-solutions.it

http://twitter.com/geosolutions_it

-------------------------------------------------------

AVVERTENZE AI SENSI DEL D.Lgs. 196/2003

Le informazioni contenute in questo messaggio di posta elettronica e/o nel/i file/s allegato/i sono da considerarsi strettamente riservate. Il loro utilizzo è consentito esclusivamente al destinatario del messaggio, per le finalità indicate nel messaggio stesso. Qualora riceviate questo messaggio senza esserne il destinatario, Vi preghiamo cortesemente di darcene notizia via e-mail e di procedere alla distruzione del messaggio stesso, cancellandolo dal Vostro sistema. Conservare il messaggio stesso, divulgarlo anche in parte, distribuirlo ad altri soggetti, copiarlo, od utilizzarlo per finalità diverse, costituisce comportamento contrario ai principi dettati dal D.Lgs. 196/2003.

 

The information in this message and/or attachments, is intended solely for the attention and use of the named addressee(s) and may be confidential or proprietary in nature or covered by the provisions of privacy act (Legislative Decree June, 30 2003, no.196 - Italy's New Data Protection Code).Any use not in accord with its purpose, any disclosure, reproduction, copying, distribution, or either dissemination, either whole or partial, is strictly forbidden except previous formal approval of the named addressee(s). If you are not the intended recipient, please contact immediately the sender by telephone, fax or e-mail and delete the information in this message that has been received in error. The sender does not give any warranty or accept liability as the content, accuracy or completeness of sent messages and accepts no responsibility  for changes made after they were sent or for other risks which arise as a result of e-mail transmission, viruses, etc.

--
You received this message because you are subscribed to the Google Groups "mapstore-developers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mapstore-develo...@googlegroups.com.
To post to this group, send email to mapstore-...@googlegroups.com.
Visit this group at http://groups.google.com/group/mapstore-developers.
For more options, visit https://groups.google.com/d/optout.

[Mauro Bartolomeoli]

Hi Stefano,

Basically, I'm replacing the focus() function with the empty function on all editors making use of a TextField (or one of its subclasses). This works quite well, the problem is gone; the only drawback is that you need to click twice on the grid cell you want to edit to actually gain focus.

Note: what do we lose if we comment inp.focus() as you suggest? Is the textfield focused anyway?

As I said earlier, yes, the textfield can be focused anyway clicking twice on the grid cell to edit.

Do you think all this madness makes for an acceptable workaround? ;-)

I think it could be acceptable. I would ask you just a bit of further investigation on this idea: it could be that the scrolling happens because when you ask for input focus the editor is not yet "in place". Could you try to do some weird things like calling focus after a setTimeout, playing with the timing to see if it fixes the issue?

Mauro

[Tobia Di Pisa]

Hi Stefano,

working on a MapStore's customization for a customer, I've found the effective reason of the problem.

The bug is generated by an HTML element added to support the PrintSnapshot plugin:

<div style="visibility:hidden"><canvas id="printcanvas" /></div>

you can find this fragment both inside the base.html and composer.html (but also in other MapStore's  templates).

I think a valid solution could be to modify the CSS of the DIV container to:

<div style="position:absolute; top:-10000px; left:-10000px; visibility:hidden"><canvas id="printcanvas" /></div>

We can use also:

<div style="display:none"><canvas id="printcanvas" /></div>

but I prefere the first one that use an ExtJS approach. Can you try yourself and close the issue?

Regards,

    Tobia Di Pisa

==
GeoServer Professional Services from the experts! Visit
http://goo.gl/NWWaa2 for more information.
==

Dott. Ing. Tobia Di Pisa

Software Engineer

GeoSolutions S.A.S.
Via Poggio alle Viti 1187
55054  Massarosa (LU)
Italy

phone: +39 0584 962313

fax: +39 0584 1660272

http://www.geo-solutions.it
http://twitter.com/geosolutions_it

-------------------------------------------------------

Call

Send SMS

Add to Skype

You'll need Skype CreditFree via Skype

-------------------------------------------------------

AVVERTENZE AI SENSI DEL D.Lgs. 196/2003

Le informazioni contenute in questo messaggio di posta elettronica e/o nel/i file/s allegato/i sono da considerarsi strettamente riservate. Il loro utilizzo è consentito esclusivamente al destinatario del messaggio, per le finalità indicate nel messaggio stesso. Qualora riceviate questo messaggio senza esserne il destinatario, Vi preghiamo cortesemente di darcene notizia via e-mail e di procedere alla distruzione del messaggio stesso, cancellandolo dal Vostro sistema. Conservare il messaggio stesso, divulgarlo anche in parte, distribuirlo ad altri soggetti, copiarlo, od utilizzarlo per finalità diverse, costituisce comportamento contrario ai principi dettati dal D.Lgs. 196/2003.

 

The information in this message and/or attachments, is intended solely for the attention and use of the named addressee(s) and may be confidential or proprietary in nature or covered by the provisions of privacy act (Legislative Decree June, 30 2003, no.196 - Italy's New Data Protection Code).Any use not in accord with its purpose, any disclosure, reproduction, copying, distribution, or either dissemination, either whole or partial, is strictly forbidden except previous formal approval of the named addressee(s). If you are not the intended recipient, please contact immediately the sender by telephone, fax or e-mail and delete the information in this message that has been received in error. The sender does not give any warranty or accept liability as the content, accuracy or completeness of sent messages and accepts no responsibility  for changes made after they were sent or for other risks which arise as a result of e-mail transmission, viruses, etc.

--

[Stefano Costa]

Hi Tobia,

I did as you suggested and apparently that solves the issue of the entire view shifting up, thanks! :-)

I rolled back to the first solution (save and restore the grid's scrollTop value):

afterrender: function(propertyGrid) {

// register listeners on relevant grid editors

// (workaround for issue #547: https://github.com/geosolutions-it/MapStore/issues/547)

if (Ext.isChrome) {

var cm = propertyGrid.getColumnModel();

var fieldTypes = ['date', 'string', 'number']; // fix only editors using a TextField or a subclass of TextField

Ext.each(fieldTypes, function(fieldType) {

var editor = cm.editors[fieldType];

if (editor) {

editor.addListener("beforestartedit", function() {

var currentScroll = propertyGrid.getGridEl().child(".x-grid3").getScroll();

// save currentScroll as a property of the grid

propertyGrid.savedScroll = currentScroll;

console.log("saved grid scroll value: { left: " + currentScroll.left + ", top: " + currentScroll.top + "}");

});

editor.addListener("startedit", function() {

var savedScroll = propertyGrid.savedScroll;

if (savedScroll) {

var el = propertyGrid.getGridEl().child(".x-grid3");

var delayedTask = new Ext.util.DelayedTask(function() {

// restore grid's scroll value

el.scrollTo("left", savedScroll.left);

el.scrollTo("top", savedScroll.top);

console.log("restored grid scroll value: { left: " + savedScroll.left + ", top: " + savedScroll.top + "}");

});

delayedTask.delay(10);

}

});

}

});

}

}

Notice the delay of 10 ms before restoring the grid's scroll value: by trial and error, this seems to be the ideal value to make the grid shift unnoticeable.

I'd say this code plus Tobia's fix definitely solve the issue: Mauro, what do you think?

Thanks to all,

--SC

[Mauro Bartolomeoli]

Good for me!

Mauro