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

Bind does not yet handle radio buttons #5579

Open
MarkStega opened this Issue Aug 16, 2018 · 4 comments

Comments

Projects
None yet
3 participants
@MarkStega
Copy link

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

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Author

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

This comment has been minimized.

Copy link
Author

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

This comment has been minimized.

Copy link
Author

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 aspnet/Blazor Dec 17, 2018

@aspnet-hello aspnet-hello added this to the Backlog milestone Dec 17, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.