fix: FluentSelect fails in SSR forms

[rhealthyme]

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]

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]

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]

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

[rhealthyme]

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]

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]

That worked. Appreciate the assist.

[JonaBeacon]

@rhealthyme I download the code and try to add Name to the FluentCombobox but it doesnt works, can you help me plis ?

[rhealthyme]

Hi. I'm confident the fix will be in an upcoming version, meanwhile you can get around the problem with 3 steps in a page where you have an SSR form with a List component: First, in the beginning of your code block, put a declaration something like: protected Dictionary<string, object> NameProxy { get; set; } = new(); Second, in your OnInitialized[Async] method put something like: NameProxy.Add("name", "Model.Attribute"); // using your own Model and attribute name Third, in the declaration of your select (or other list) add something like: ***@***.***" Be sure and keep the actual Name="Model.Attribute" assignment as well so that when the next version comes in with a fix you can just search for and remove all the "NameProxy" stuff and be good to go. The only real issue with the workaround is that you need to define a NameProxy for each individual attribute on each form where you use one of the List components to populate the attribute. Otherwise it seems to work great (I didn't want to rebuild the library for a temporary issue that is already fixed for the next version). Jim

…

On Mon, Jul 1, 2024 at 5:49 PM JonaBeacon ***@***.***> wrote: @rhealthyme <https://github.com/rhealthyme> I download the code and try to add Name to the FluentCombobox but it doesnt works, can you help me plis ? — Reply to this email directly, view it on GitHub <#2274 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACKFF5SWCX5EVPF7SDSPYI3ZKHMINAVCNFSM6AAAAABJ7K7TFKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMBRGI4DMNJTGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>