Selects and Autocompletes get "stuck" in deployed Blazor Server app (Azure)

[negator13]

Bug type

Component

Component name

MudAutocomplete, MudSelect

What happened?

I have a fairly simple web app with some user inputs - a couple Selects and an Autocomplete. My Users are reporting a consistent bug where either the autocomplete or the Selects won't close when you make a selection - they stay open indefinitely and block the rest of the UI, and don't close when you click outside of them.

Does this sound like a common issue to anyone who might know what the problem could be? I have added try/catch blocks to all of the methods bound to the ValueChanged and searchFunc properties of the inputs.

Here is the page that exhibits the unwanted behavior: https://eldenring.negator13.com/calculator

My app is Blazor Server (.NET 6) and is deployed as a Windows App Service in Azure.

Expected behavior

Whenever a user makes an input choice, I expect the input to close and allow interaction with other components on the page.

I am explicitly catching all exceptions in my ValueChanged and searchFunc implementations for these components, so I wouldn't expect any unhandled exceptions to be causing the issue.

Reproduction link

https://eldenring.negator13.com/calculator

Reproduction steps

This is not 100% reproducible by any specific course of action, but is typically happening on my production site after a few changes of selection.

Change the selections of the "Weapon Category", "Upgrade" or "Affinity" selects a few times, and/or type in some values into the "Weapon" autocomplete and choose some inputs. Generally one of the components will "freeze" after not too many tries, and not allow the user to click out of it.

Relevant log output

No response

Version (bug)

6.0.7

Version (working)

No response

What browsers are you seeing the problem on?

Firefox, Chrome

On what operating system are you experiencing the issue?

Windows

Pull Request

• [ ] I would like to do a Pull Request

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[mckaragoz]

This bug shows only on mobile - touch devices? You should upgrade your application with the last release

[negator13]

This bug shows only on mobile - touch devices? You should upgrade your application with the last release

It happens for me (very often) on desktop (Chrome, Windows)

[negator13]

I have updated to v6.0.9 but the issue is still persisting.

[mckaragoz]

Your website works in my phone

[negator13]

Here is a screenshot that I just took.

Repro steps:

Typed in "long" and selected Longsword, then changed the "Upgrade" select a few times. Screenshot shows the select being stuck - I clicked on and off the select before taking this picture and it does not close.

[mckaragoz]

I saw these like problems on touch but see first time on desktop

[negator13]

Yeah it is not consistently reproducible with any exact sequence of steps, and I cannot reproduce it locally either, so it has been difficult to understand what the problem is.

[Geccoka]

We have exactly the same problem with our new application (this is the first time we use MudBlazor). On my machine this problem never occures, but on one of my colleague's almost every two selections fails because of this. Interesting thing, if he uses the touchpad on his laptop, it never happenes.

[mckaragoz]

We know about an issue that happens only on Server Side and only on mobile-touch. And prepared some fix that released with the last release. (only for select)

Also there is another fix for autocomplete on road and waiting for merge.

Any other information about this issue will be very useful. As you said its very strange bug

[danneforslund]

Just chiming in that this happens for us as well with autocompletes. Project is server side, but happens consistently (100%) on touch devices, both emulators and devices.

We're using a MudDrawer on the same page, which includes a MudOverlay. Could it be an event propagation problem (touch/click) with multiple MudOverlays?

[danneforslund]

To make it occur more consistently in the demo above, open the autocomplete, then click outside of it somewhere on the page. This makes the autocomplete blur (the little visual shadow disappears) and the property IsOpen is false, but the list stays open and won't close on subsequent item selections.

[mckaragoz]

Just chiming in that this happens for us as well with autocompletes. Project is server side, but happens consistently (100%) on touch devices, both emulators and devices.

Yes, autocompletes have problem and i hope they will fixed with #4294. But we shouldn't have problem on select after last release.

@negator13 your select's work for me (both mobile and desktop). Could you check it again? If it still has problems, then you can prepare a try.mudblazor snippet that has your select's razor code and valuechanged - bindvalue methods

[gdarlas]

In a clean, new .NET 6 Blazor Server project, with only one page that only has one autocomplete in it, everything worked perfect until I configured the Azure SignalR Service. After that autocomplete does not close. When I remove the Azure SignalR section in appsettings.json it works perfectly again. I know it sounds crazy but it is true... This happens only in versions after 6.06.

[mblichowski]

Same problem here. Happens consistently on several apps. Blazor 6.0.9 (server-side), Chrome 99.0.4844.82.

@negator13 your select's work for me (both mobile and desktop). Could you check it again? If it still has problems, then you can prepare a try.mudblazor snippet that has your select's razor code and valuechanged - bindvalue methods

try.mudblazor uses the wasm hosting model, and in my cases the autocomplete/select bug happens only on the server-side hosting + touch device, so I was unable to recreate this bug on try.mudblazor platform.

@mckaragoz has already started a PR with the fix - I can confirm that it fixes the bug on my cases. I hope that MudBlazor team will soon rollout another hotfix release, until then we can use this: https://github.com/mckaragoz/MudBlazor/tree/AutocompleteTouchFix @mckaragoz many thanks for that!

[negator13]

In a clean, new .NET 6 Blazor Server project, with only one page that only has one autocomplete in it, everything worked perfect until I configured the Azure SignalR Service. After that autocomplete does not close. When I remove the Azure SignalR section in appsettings.json it works perfectly again. I know it sounds crazy but it is true... This happens only in versions after 6.06.

This may be the case for me as well - I had experimented with adding Azure SignalR service for my app around the time that I added MudBlazor. I am removing the section altogether from appsettings (it was set to Enabled: false) and hopefully that will make a difference. UPDATE: Removed this but still seeing the issue in my deployed app.

@mckaragoz

@negator13 your select's work for me (both mobile and desktop). Could you check it again? If it still has problems, then you can prepare a try.mudblazor snippet that has your select's razor code and valuechanged - bindvalue methods

Please note again that it often takes a few tries of fiddling with the different inputs before this bug occurs. It's still happening for me. I'll work on a snippet, how/where do I link it to this issue?

[negator13]

@mckaragoz

Here is a snippet. It will not compile because I had to rip out a lot of stuff including the actual data sources, but it hopefully gives you enough information to work with about how I have implemented the controls.

https://try.mudblazor.com/snippet/wEQQEdHbSXsmUPUo

The controls are wrapped in an EditForm with EditContext="@EditContext" Context="NewContext", which I omitted.

[Geccoka]

Few more additions regarding the MudSelect won't close after selection:

• running localhost the problem never occures, just when running on a remote server
• when the problem occures, the MudOverlay inside MudSelect is closed, just the MudPopover is not

I think it is some kind of a rendering/diffing issue. In one case using MudPopover as standalone i had to use the @key attribute on the popover and change it when i needed it to close because just setting the Open parameter to false was not enough, maybe this is the case here too.

[mckaragoz]

Few more additions regarding the MudSelect won't close after selection:

• running localhost the problem never occures, just when running on a remote server
• when the problem occures, the MudOverlay inside MudSelect is closed, just the MudPopover is not

I think it is some kind of a rendering/diffing issue. In one case using MudPopover as standalone i had to use the @key attribute on the popover and change it when i needed it to close because just setting the Open parameter to false was not enough, maybe this is the case here too.

Tried to add @key but didn't work.

And here is another question, same autocomplete work on WASM, Wasm-Mobile and Server Side, but not server side-mobile. Why?

[henon]

This happens only in versions after 6.0.6.

If that is really the case, then I know a very good way of finding the commit that caused the change. It is called git bisect. You give it a good commit (i.e. the commit tagged with version 6.0.6) and give it the bad commit (current head) and it will do a binary search to find the exact commit which caused the issue in a couple of steps (5 to 7 checkouts). It will check out a commit in the middle. You compile and see if you can reproduce the issue. Then you tell it if it is still bad or not. Depending on your answer it will check out further commits. Some of them will be good, some bad. You have to recompile at every step and test for the bug. In just a few steps it will finally have the commit which caused it. When we know that we are a big step towards finding the bug.

So, of the ones who can more or less reliably reproduce, who will do the bisect?

[woaksie]

I have the same problem on my site. Works when I run it from Visual Studio but when deployed to a production server a MudAutocomplete dropdown does not close when an item is selected.

I am not running on Azure. I am on a shared server with an ISP on IIS and my app is Blazor Server.

If I click on a different MudSelect above this autocomplete it will close.

Another characteristic of this bug is that as you are typing values into the autocomplete field the options being offered in the dropdown are one character behind. For example, if I type ABC I get offered options that contain AB. Again this works fine locally. If I left-arrow on the ABC or focus leaves the page completely then the options are correctly restricted to options containing ABC.

I wonder if it is a timing issue. I am testing on a Windows machine with Chrome, Firefox and Edge. I am using MudBlazor 6.0.9.

This was working with an earlier version of MudBlazor but not sure when it broke. I think 6.0.4 was ok.

.

[Geccoka]

I have some news regarding the MudSelect won't close problem. We were on the 6.0.8 version and this produced the bug. But after i've upgraded the project to the latest 6.0.9 the MudSelect seems to be working fine as for now.

[negator13]

I have some news regarding the MudSelect won't close problem. We were on the 6.0.8 version and this produced the bug. But after i've upgraded the project to the latest 6.0.9 the MudSelect seems to be working fine as for now.

This did not help for me, I tried upgrading to 6.0.9 and was still having the issue consistently. I've now downgraded it to 6.0.4 as others have reported not having the problem before version 6.0.5.

[mckaragoz]

I have some news regarding the MudSelect won't close problem. We were on the 6.0.8 version and this produced the bug. But after i've upgraded the project to the latest 6.0.9 the MudSelect seems to be working fine as for now.

This did not help for me, I tried upgrading to 6.0.9 and was still having the issue consistently. I've now downgraded it to 6.0.4 as others have reported not having the problem before version 6.0.5.

So no problem with 6.0.4?

[negator13]

So no problem with 6.0.4?

I am still seeing the "lag" that @woaksie describes above:

as you are typing values into the autocomplete field the options being offered in the dropdown are one character behind. For example, if I type ABC I get offered options that contain AB

The issue with the controls not closing seems better, although it still gets stuck open sometimes, I think when the choice are "lagging" like this.

[mckaragoz]

What about this #4326

[henon]

Using git bisect I found out that this PR causes the issue: 6ea9967c9f4b43ed7cce60eb5070890186b850f9 AutoComplete: Fix initial open with server-side and non-async search (https://github.com/MudBlazor/MudBlazor/pull/3776)

[negator13]

@henon Deployed the latest code with your fixes to my test instance https://eldenring-test.azurewebsites.net/calculator, I believe the problem is fixed. Thank you for taking the time to use git bisect to find the culprit