[CLOSED] ComboBox/Date Picker issue in Chrome on Touch enabled device

Printable View

Feb 15, 2018, 8:39 PM
Fahd

[CLOSED] ComboBox/Date Picker issue in Chrome on Touch enabled device

Hi Support,

Ext.Net 4.X ComboBox and DateField trigger doesn't work properly in chrome on touch enabled device, when you click on comboBox trigger arrow it opens and close list instantaneously most of the time, while on Date field it directly goes to month/year pick selection for some reason (As if you clicked on month after date picker opens up).

In console window I see log saying 'Unable to preventDefault inside passive event listener due to target being treated as passive.' And points to this link.

If I disable 'Document Level Event Listeners Passive Default' flag in chrome at chrome://flags, it works normally but that doesn't seem like a good idea to do for every user's machine.

I don't think you need sample code for this, just use this two control and you should be able to easily reproduce the issue.

Thanks
Feb 19, 2018, 4:46 PM
fabricio.murta

Hello @fahd!

Thanks for the report. Can you browse our Examples Explorer and point one or two examples where you can reproduce the issue at least? I wonder if we can reproduce the issue on chrome just in developer tools enabling the 'laptop with touch' emulation...
Feb 20, 2018, 12:14 AM
Fahd

Hi Fabricio,

I'm not able to reproduce the issue with Ext example site (may be you guys overriding passive flags in javascript) so I'm attaching sample that you can play around. And to reproduce you need actual touch enabled device, I don't see this issue in chrome emulator.

Also check out this link if it helps diagnose the issue.

Sample code:

View:

Code:

@{ ViewBag.Title = "Index"; Layout = null; var X = Html.X(); } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"/> <title>TreeGrid</title> @(Html.X().ResourceManager()) </head> <body> <div> <br/> @( X.ComboBox() .ID("cmbTest1") .Editable(false) .Width(300) .LabelWidth(50) .MarginSpec("0 5 0 5") .FieldLabel("Combo1:") .Items( new Ext.Net.ListItem("Item 1", "1"), new Ext.Net.ListItem("Item 2", "2") ) ) </div> </body> </html>

Controller:

Code:

public class TestController : Controller { public ActionResult Index() { return View(); } }
Feb 21, 2018, 3:02 AM
fabricio.murta

Hello @fahd!

Is there a chance the touch device uses an unsupported browser? Ext.NET can't go much further over how ExtJS, its underlying framework, steps over. Sencha even keeps a list of browsers they support per ExtJS version. Ext.NET currently uses ExtJS 6.5.2, the list of supported browsers is here: http://docs.sencha.com/extjs/6.5.2/g..._browsers.html

We've have some issues (still open) regarding browsers (notably firefox) on touch enabled devices. Well, you made it clear the used browser is chrome though. What exactly is the hardware you are using (brand and model)? Maybe that could be an issue specific for that one or... maybe it sends a user-agent ExtJS (thus Ext.NET) does not expect, and it falls back to "default" instead of chrome-driven settings. If that's it, then we could find a simple way to fix, simply by supporting that user-agent, making it deal as chrome.

Anyway, still more detail would be useful. If we can't reproduce the issue in examples explorer nor the test case you provided using chrome emulator, then we're left in the dark with the means to give you a solution.

I don't think we have specific overrides on Ext.NET Examples Explorers for touch related issues nor chrome passive settings. You could try cloning from git our examples explorer sources if you have a Visual Studio + .NET build environment ready on your touch laptop -- and see whether the issue is reproducible that way.

Isn't there a chance your project does something that enables the issue on your touch device (instead of our Examples Explorer avoiding the issue somehow)? Maybe that's worth a shot, building a fresh and clean project with your test case and loading it from the touch device.

Sorry if the suggestions are not accurate, with what we have now that's the best we can do to try to help you with the issue. I hope you understand.
Feb 21, 2018, 9:49 PM
Fahd

Hi Fabricio,

So I was using Ext.Net MVC 4.1, and I upgraded it to 4.5 and all the touch related issue seems to be fixed for now. Seems like sencha did fix to ExtJs in past few releases.

Thanks
Feb 21, 2018, 9:55 PM
fabricio.murta

Hello @Fahd! Great news!

That also explains why you weren't able to reproduce this in examples explorer!! I was just looking at the issue to see if I could realize something. Sencha issue is still marked as open so, maybe they didn't fix it completely, or just fixed as another issue and forgot this one open.

Unfortunately we don't have a device handy that would reproduce this issue, so we were left just wondering. As you mentioned it wasn't possible to reproduce it in chrome in touch emulation mode...

But again, great it worked, had no idea you were on older versions, we only test code on current version, unless we are dealing with possible regressions. After all, the new version was released for a reason, right?

Thank you for the feedback!