Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add an InputRadio component #5579

Closed
MarkStega opened this issue Aug 16, 2018 · 19 comments
Closed

Add an InputRadio component #5579

MarkStega opened this issue Aug 16, 2018 · 19 comments

Comments

@MarkStega
Copy link

@MarkStega MarkStega commented Aug 16, 2018

I have the the following in my cshtml

    <td>
        <input type="radio" name="vacation" bind="@northwestVacation" /> Northwest @northwestVacation<br>
        <input type="radio" name="vacation" bind="@sinaiVacation" /> Sinai @sinaiVacation
    </td>

with corresponding properties northwestVacation and sinaiVacation in my code. During a debug session I see the get called numerous times for each but even with a true value the corresponding radio button is not in the selected state. And, as I select either button I never see the set called on either property.

@SteveSandersonMS
Copy link
Member

@SteveSandersonMS SteveSandersonMS commented Aug 16, 2018

Yes, radio buttons aren't one of the supported input elements yet. This is a good thing to add to the backlog.

@SteveSandersonMS SteveSandersonMS changed the title Binding to radio button is not working as expected Bind does not yet handle radio buttons Aug 16, 2018
@MarkStega
Copy link
Author

@MarkStega MarkStega commented Aug 16, 2018

@SteveSandersonMS

It appears that the issue for the input type of radio is the generated code for the GetValue (100) against 'value'

builder5.OpenElement(97, "input");
builder5.AddAttribute(98, "type", "radio");
builder5.AddAttribute(99, "name", "vacation");
builder5.AddAttribute(100, "value", Microsoft.AspNetCore.Blazor.Components.BindMethods.GetValue(northwestVacation));
builder5.AddAttribute(101, "onchange", Microsoft.AspNetCore.Blazor.Components.BindMethods.SetValueHandler(__value => northwestVacation = __value, northwestVacation));

as opposed to a checkbox with the same binding that generates the GetValue (117) against 'checked'

builder5.OpenElement(115, "input");
builder5.AddAttribute(116, "type", "checkbox");
builder5.AddAttribute(117, "checked", Microsoft.AspNetCore.Blazor.Components.BindMethods.GetValue(northwestVacation));
builder5.AddAttribute(118, "onchange", Microsoft.AspNetCore.Blazor.Components.BindMethods.SetValueHandler(__value => northwestVacation = __value, northwestVacation));

I gave a shot at understanding the Blazor BindTagHelperDescriptorProvider() where I believe this code is being generated I think by the GetElementBindData().

As far as I can tell all that is needed for radio support is the addition of one line to BindAttributes.cs of

    [BindInputElement("radio", null, "checked", "onchange")]

to get the appropriate element of a radio button to get the value of the binding.

@MarkStega
Copy link
Author

@MarkStega MarkStega commented Aug 17, 2018

@SteveSandersonMS
Adding the [BindInputElement(...)] to BindAttributes.cs does indeed make the code adding the attributes the same for a checkbox or a radio button. However, that isn't enough. So I have some more spelunking of the Blazor project to do (And I was hoping for the simplest one line PR ever )

@MarkStega
Copy link
Author

@MarkStega MarkStega commented Aug 18, 2018

@SteveSandersonMS
The exploration continues. I added code to EventForDotNet.ts in FromDOMEvent() of

      case 'change': {
        const targetIsCheckbox = isCheckbox(element);
        const targetIsRadio = isRadio(element);
        const newValue = (targetIsCheckbox || targetIsRadio) ? !!element['checked'] : element['value'];
        return new EventForDotNet<UIChangeEventArgs>('change', { type: event.type, value: newValue });
      }

function isRadio(element: Element | null) {
  return element && element.tagName === 'INPUT' && element.getAttribute('type') === 'radio';
}

I see the first assignment of the radio button in the property but not subsequent changes. I guess this means I need to figure out the caller of FromDOMEvent()

@aspnet-hello aspnet-hello transferred this issue from dotnet/blazor Dec 17, 2018
@aspnet-hello aspnet-hello added this to the Backlog milestone Dec 17, 2018
@julienGrd
Copy link

@julienGrd julienGrd commented Jun 13, 2019

Hello, what the current situation on this subject

I was using this kind of code until now, was worked in preview 3/4, but today i see it not work on preview 5, the checked is not render correctly, but the on change still working

<label class="form-check-label">
                      <input class="form-check-input" type="radio" name="rbSelectChildren" checked="@(Model.ShowAllDossiers == true)" onchange="@(() => Model.ShowAllDossiers = true)" /> 
Tous les dossiers
</label>

<label class="form-check-label">
                      <input class="form-check-input" type="radio" name="rbSelectChildren" checked="@(Model.ShowAllDossiers == false)" onchange="@(() => Model.ShowAllDossiers = false)" />
Uniquement les
</label>

@DanTsion
Copy link

@DanTsion DanTsion commented Jun 28, 2019

Hello, same question to @SteveSandersonMS ...
Do you advance to the issue ?
Thanks

@robertmclaws
Copy link

@robertmclaws robertmclaws commented Aug 26, 2019

Has this been figured out yet? Preview 9 (and therefore RTM) is eminent.

@mkArtakMSFT mkArtakMSFT removed this from the Backlog milestone Aug 27, 2019
@mkArtakMSFT mkArtakMSFT added this to the 3.1.0-preview1 milestone Aug 27, 2019
@SQL-MisterMagoo
Copy link
Contributor

@SQL-MisterMagoo SQL-MisterMagoo commented Sep 2, 2019

Radio buttons are not hard to work with in Blazor - I have a gist and Blazor Fiddle that demonstrates this here : https://gist.github.com/SQL-MisterMagoo/bc5713fb26bf84bf810d48d1f45c361a

@MarkStega
Copy link
Author

@MarkStega MarkStega commented Sep 2, 2019

Essentially a similar implementation but with an integer backing store:

            <tr>
                <th>
                    Saturday display:
                </th>
                <td align="left">
                    <input type="radio" name="group" checked="@(pGroupCode == 0)" @onchange="@(() => pGroupCode = 0)" /> Group with Friday<br />
                    <input type="radio" name="group" checked="@(pGroupCode == 1)" @onchange="@(() => pGroupCode = 1)" /> Group with Monday<br />
                    <input type="radio" name="group" checked="@(pGroupCode == 2)" @onchange="@(() => pGroupCode = 2)" /> Do not show
                </td>
            </tr>

and the code:

        protected int pGroupCode { get; set; }

@granicz
Copy link

@granicz granicz commented Sep 5, 2019

In case anyone is interested, here is it for F# and Bolero (which implements a Model-View-Update programming model on top of Blazor): fsbolero/Bolero#75

@danroth27 danroth27 mentioned this issue Sep 7, 2019
10 tasks
@SteveSandersonMS SteveSandersonMS self-assigned this Sep 9, 2019
@mkArtakMSFT mkArtakMSFT added this to Triage in Blazor 3.1 via automation Sep 9, 2019
@mkArtakMSFT mkArtakMSFT moved this from Triage to To Do (3.1.0 Preview2) in Blazor 3.1 Sep 9, 2019
@mkArtakMSFT mkArtakMSFT moved this from To Do (3.1.0 Preview2) to 3.1.0 Preview3 in Blazor 3.1 Sep 25, 2019
@mkArtakMSFT mkArtakMSFT removed this from the 3.1.0-preview2 milestone Sep 27, 2019
@javiercn
Copy link
Contributor

@javiercn javiercn commented Nov 6, 2019

We don't have an InputRadio component itself that works with forms.

This is something that could be built, but I suggest filing a separate issue to track it elsewhere instead of here.

@mkArtakMSFT mkArtakMSFT removed this from the blazor-wasm milestone Nov 8, 2019
@mkArtakMSFT mkArtakMSFT added this to the 5.0.0-preview1 milestone Nov 8, 2019
@mkArtakMSFT mkArtakMSFT removed this from the 5.0.0-preview1 milestone Jan 10, 2020
@mkArtakMSFT mkArtakMSFT added this to the next sprint planning milestone Jan 10, 2020
@mkArtakMSFT mkArtakMSFT removed this from the Next sprint planning milestone Jan 23, 2020
@mkArtakMSFT mkArtakMSFT added this to the Backlog milestone Jan 23, 2020
@SteveHindmarsh
Copy link

@SteveHindmarsh SteveHindmarsh commented Mar 26, 2020

Any news on this yet? I can't get Blazor radio buttons to work with enums and the docs example given does not work? https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1

@chucker
Copy link

@chucker chucker commented Mar 26, 2020

@SteveHindmarsh while binding directly may not work yet, writing a component that generates all the radio buttons from an enum isn't that hard.

@SteveHindmarsh
Copy link

@SteveHindmarsh SteveHindmarsh commented Mar 26, 2020

Yes the Blazor paradigm makes things blisteringly simple once you start getting familiar however, if I hadn't wasted time with the incorrect documentation I may have now had exactly that. Anyhow it's allowed me to get familiar with EditContext.OnFieldChanged and the EditContext.NotifyFieldChanged event which has allowed me to program a solution. Blazor rocks!

@javiercn javiercn removed their assignment Apr 24, 2020
@pranavkm pranavkm removed this from the Backlog milestone Jun 24, 2020
@pranavkm pranavkm added this to the 5.0.0 milestone Jun 24, 2020
@pranavkm pranavkm changed the title Bind does not yet handle radio buttons Add an InputRadio buttton Jun 24, 2020
@pranavkm pranavkm changed the title Add an InputRadio buttton Add an InputRadio component Jun 24, 2020
@pranavkm pranavkm added this to Milestone 1 (Aug 4) in Mackinnon's internship Jun 24, 2020
@MackinnonBuck MackinnonBuck moved this from Milestone 1 (Aug 4) to In progress in Mackinnon's internship Jun 26, 2020
@MackinnonBuck MackinnonBuck moved this from In progress to Done in Mackinnon's internship Jul 2, 2020
@MackinnonBuck MackinnonBuck added Done and removed Working labels Jul 2, 2020
@mkArtakMSFT mkArtakMSFT removed this from the 5.0.0 milestone Jul 6, 2020
@mkArtakMSFT mkArtakMSFT added this to the 5.0.0-preview8 milestone Jul 6, 2020
@msftbot msftbot bot locked as resolved and limited conversation to collaborators Aug 5, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
Linked pull requests

Successfully merging a pull request may close this issue.

None yet