search

microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.46k stars 319 forks source link

fix: FluentSelect fails in SSR forms #2274

Open rhealthyme opened 4 days ago

rhealthyme commented 4 days ago

FluentSelect (actually all of the List components in the form section of the fluent-ui examples) renders correctly and allows selection but never posts the selected value back to the server when used in SSR forms.

The starship-3 example here: https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/input-components?view=aspnetcore-8.0 shows a Blazor EditForm with an InputSelect that does work in SSR mode but also contains Option level configuration not in the fluent-ui examples.

No configuration permutation of the fluent-ui FluentSelect/FluentOption components (even those that mimic the working example) seems to work in SSR mode even when it works flawlessly in Interactive mode. Nothing is ever posted back from the browser from the component.

vnbaaij commented 3 days ago

Hi,

Thanks for your report, but...

Please supply us with ready-to-run reproduction code in the form of something we can copy/paste, a (zipped) project structure or a GitHub repository.

We do not have capacity to craft or compose a reproduction for every issue that gets raised.

If no code or repository is provided, this issue will be closed in 3 days

Help us to help you. Thanks.

rhealthyme commented 3 days ago

Sure. The attached is the latest version of the your template with the starship-3 code from the MS site pasted into the home page to run in SSR mode and a Starship.cs model added.

In the example code the InputSelect populates Starship.Classification.

I added Starship.Classification2 with a FluentSelect right below the InputSelect on the page. One always works, the other never populates Model.Classification2 in the Submit method (I've tried several variations). If you uncomment the rendermode at the top to make it interactive it works correctly.

SSRFormSelectIssue.zip

vnbaaij commented 3 days ago

Thanks for supplying the details. We'll taka a look soon.

rhealthyme commented 48 minutes ago

I did a bit of digging into the submit event in the browser and your project source.

The docs note that in SSR mode it is necessary to explicitly assign the Name parameter of the fluent components in forms. In your source code, in components like FluentTextField.razor, you can see the assignment of that parameter to the underlying component, "name=@Name", in the component initialization. None of the list components in the List folder (FluentSelect.Razor, etc.) have that assignment in their definition.

When intercepting the submit event of the form in the browser (using the zip I attached above) it is possible to see that the name property of the InputSelect is (auto) configured to match the binding needed in the form processed by FormData and posted back. The Fluent List component below that has a blank name when submitted to FormData and is then not posted back.

I conjecture this lack of "name=@Name" in the List component definitions is at least part of the issue I am seeing although I have not rebuilt the library to test.

Great components by the way. Loving the way they come together with the Blazor component model in the UI.

vnbaaij commented 23 minutes ago

I did not have time to look at this in depth yet, but was expecting the name to be the culprit indeed.

The list based components (as all FluentComponentBase components) implement the additional attributes collection so you should be able to specify the name attribute yourself (for testing without rebuilding the library).

rhealthyme commented 8 minutes ago

That worked. Appreciate the assist.