fix: Event callback does not trigger for Switch, Checkbox and Radio controls when deployed to Azure Container Apps along with Application Gateway

[mgdelcar]

🐛 Bug Report

We have a server side Blazor web app that we deploy to Azure Container Apps (ACA) behind Azure Application Gateway (AGW). We have noticed that the Checkbox, Switch, and Radio controls do not trigger the event callback when they change.

💻 Repro or Code Sample

1. Create an app that contains the switch control:

<FluentSwitch @bind-Value="@isFiltered" @bind-Value:after="@OnFilterChanged">Show all</FluentSwitch>
<p>@this.someValue</p>

and add a test callback handler:

private string someValue = "Text";
private void OnFilterChanged()
{
    this.someValue = "Filtered applied";
    this.StateHasChanged();
}

2. Make sure you can run this locally and you can see Filtered applied after flipping the switch.
3. Deploy this app to ACA and make sure the deployment is behind the AGW.

💡Important note: This issue reproduces when the app is deployed to ACA along with AGW. However, it does not reproduce when deploying to ACA without AGW.

🤔 Expected Behavior

The behavior should be akin the local behavior, we should be able to see the effects of calling OnFilterChanged.

😯 Current Behavior

The call back does not get invoked for neither Switch, Checkbox, Radio controls.

💁 Workaround

We reviewed the code of the switch and it does not use the checkbox HTML control but it is an SVG image. Our workaround was to create a FluentUI looking switch like this (with CSS + JS to have the same look and feel):

<input type="checkbox" class="fluentui-switch-input" id="@id" @bind:get="Value" @bind:set="OnValueChangedAsync" />

🔦 Context

We rather not use the workaround that I described above. Given that these are basic controls, we expect them to be reliable regardless of the environment.

🌍 Your Environment

• Microsoft.FluentUI.AspNetCore.Components Version=4.11.7
• dotnet: 9
• Server OS: Azure Linux
• Client OS: Windows 11
• Client Browser: Edge

[vnbaaij]

Let's chat internally to see how we can work on this. I tried to set up a reproduction but was not successful...

[tonesandtones]

+1

I'm experiencing the same problem for checkboxes with an app deployed on Azure App Service inside an App Service Environment and behind a customer-specific app delivery controller (sadly no details on what that is beyond some kind of perimeter ingress proxy).

(We only use checkboxes in our app, have not confirmed either way whether radio buttons or switches are also affected)

The workaround that @mgdelcar described is working for us.

Environment:

• Microsoft.FluentUI.AspNetCore.Components Version=4.11.6
• dotnet 8
• Azure App Service - Windows IIS
• App Service Environment
• some kind of perimeter ingress proxy (no details unfortunately)
• OS: Windows 10
• Browser: Edge and Chrome

[vnbaaij]

I'm pretty sure it is an issue with the underlying web components. But without a way to reproduce, it will be impossible to investigate an assess what the problem really is. I have tried to create a reproduction environment but was not successful. I do not have any resources/time to invest in this anymore.

If it is indeed the web components, then there is not much we can do as we will not be seeing fixes for that version anymore.

[DavidvDoorn]

We have the exact same problem. But we have 2 blazor web apps. One works and one does not. Everything seems the same and we cannot find any difference. The only thing we see happening is on site which works when you press the checkbox (or any other component) you see these come up in the sources:

In the web app where the checkbox does not work we do not see this happening.

[vnbaaij]

I think we have established that this is caused by the Application Gateway. Someone with access to such a setup should try to tweak the AGW settings. Let ASP files go through, etc.

[vnbaaij]

Closing due to inactivity