[OPEN] [#1639] [4.8.1] Combobox Search issues with Chrome and Ext.NET 4.8.1

[ASchott]

Hello,

i recognized a problem in my web application and i can reproduce it with the examples explorer.

After typing "*" and changing the page forward and backwards in the resultset the window is closed.
The problems appears with Chrome version 74.0.3729.131 (not reproducable with Firefox 60.6.2)

Not Working:
https://examples4.ext.net/#/Form/Com...Custom_Search/

Working in all browsers:
https://examples3.ext.net/#/Form/Com...Custom_Search/

Can you please have a look at it?

Many thanks for your help!

Bye,

Andreas

[fabricio.murta]

Hello Andreas!

Thanks for reporting the issue, we have logged it in github under #1639. We'll post an update here as soon as we get it fixed in the code, and slated for the next Ext.NET release.

Notwithstanding, we'll take a look on ways to get over this issue so you can get back up and running in no time. In the meanwhile if you have any further information on the issue, please don't hesitate to share. By the way, did you notice this appeared after an upgrade, or you just found it by chance when developing new pages?

We'll get back to you soon.

[ASchott]

Hi Fabricio,

thanks for your fast reply and your help!
I found the problem while developing new pages, so i can't say if it worked in an older version of Chrome.

Bye,
Andreas

[fabricio.murta]

Hello again, Andreas!

Sorry for the delay, but this seems trickier than I thought, and we couldn't come with a good grip on the issue in the short term.

The best I could do was, by elimination, removing/resetting the html.body.padding and h1.margin-top was the only way to make it work.

That is, either remove these from examples.css or add this style block after including it:

<style type="text/css">
    html body {
        padding: unset
    }

    h1 {
        margin-top: 26.8px
    }
</style>

These values comes from the computed styles google chrome reports when they are not set at all.

Further investigation will need to take place before we definitively resolve this issue. At least now we have a way to avoid it. Note that, as that's CSS-related, changing the theme might require different values, or even not trigger the defect at all.

Hope this helps for the time being!

[ASchott]

Hi Fabricio,
thanks for your quick solution. Sadly it does not work in my application.
But when i apply your css solution with the Chrome Debugger to the Combobox example, i can see, that it works.

Maybe you can find a more generic solution for this problem.

Thanks for your help and have a nice weekend.

Bye,
Andreas

[fabricio.murta]

Hello again, Andreas!

It will take some time to find what else could be affecting your page if we can't reproduce the scenario at our end. I can think on two approaches that might help you tackle with the solution, although they may be not really helpful.

1. try to reduce your problem to a minimum, from the current page you have to a bare simple, "css-less", with only that combo box, until you isolate what's triggering the issue in your case
2. simplify your actual scenario down to a test case (we are not allowed to work with proprietary/copyrighted/private code here after all), so that we can actually reproduce the problem the way you have there and try to pinpoint other -- or a better -- solution for the issue.

Knowing the issue has to do with CSS, it suggests there could be a problem when the dropdown box is not laid exactly where it expected to be. So highly potential scenarios that might affect how the issue are triggered are the active Ext.NET theme or custom CSS overrides throughout the solution. So focusing the "reduction" of the problem in the CSS aspect around the page is likely to help identify what, in your specific scenario, triggers the issue.

We'll post an update here as soon as we have a better solution for this (or fix it in the code). If in the meanwhile you get a test case closer to your scenario, don't hesitate in sharing, as it might reveal a scenario not expected around the fix, in the least.

Hope this helps!

[ASchott]

Hi Fabricio,
thanks for your message.

I didn't have much luck with css styling in my application, but i found a quick fix for me while debugging with Chrome debugger.
I nailed it down to the canfocus function, when i comment out c.push(a) it works like a charm. I have to test my application to see if i have some side effects now.

(Note: while debugging the focus is not lost and the combobox is not collapsing, so i think there is a timing issue)

Ext.apply(Ext.ComponentQuery.pseudos, {
		canfocus: function (d, e) {
			var f = d.length, c = [], b = 0, a;
			for (; b < f; b++) {
				a = d[b];
				if (a.canFocus && a.canFocus(!1, e)) {
					//c.push(a)
				}
			}
			return c
	}
});

I applied the code at runtime in Chrome - the example works then:
https://examples4.ext.net/Examples/F...Custom_Search/

Bye,
Andreas

[fabricio.murta]

Hello Andreas!

That's a nice finding! This looks like a broad fix and has good potential to break something else, so watch out. But as long as you keep the override in the page you need it, you should be fine.

As a tip to better read the code if you're down to debugging, adding this to your ResourceManager should help:

ScriptMode="Debug" SourceFormatting="true"

So you would end up with a less "cryptic" override and should make life a lot easier to understand what's going on.

Notwithstanding, thank you for sharing the solution that works for you, not just in the scenario we could reproduce, but also with the broad figure, albeit not being feasible to be reproduced outside of property-constrained code.

Anyway, a proper fix needs to take place, and we will keep the issue open until we can work on that and ultimately fix the issue for good in Ext.NET. Once fixed, a follow-up will be posted here to inform about it.

Hope the debugging tip helps!

[anh34]

Hello Fabricio & ASchott

I have same issue with chrome. Is there any good way to fix it?

Where can I put ASchott's code? Is it safe to use ASchott's code?

Thanks in advance.

[fabricio.murta]

Hello @anh34!

You can place ASchott's code in a <script type="text/javascript"> block in your page.

The solution provided by him works for him and there's no guarantee it should work for you. If you are using overrides it is better you know what it does so, javascript laguage knowledge may be required to understand how it works. Or at least somebody who does on your team to tell whether it is safe or not to use that code therein and be able to troubleshoot in case it does not help 100% in your scenario -- but may get you started for an actual solution.

Hope this helps!