Can't set custom 'value' attribute for a checkbox

[dlr1]

The following code in .html file works but not in a page (.cshtml)

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked>
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">Music</label>
  </div>
</fieldset>

[floreseken]

What exactly is the problem? what is the error?

[dlr1]

Coding Checkbox is not checked

[floreseken]

I guess you should remove the value= stuff. What is the meaning of that?

[awulkan]

@floreseken value is used when passing form data to a backend. Don't know if @dlr1 is using it though, his example is just copied from MDN.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

I think he/she needs to provide more of the page's code or no one will be able to help.

[brunopbarrote]

I guess you should remove the value= stuff. What is the meaning of that?

@floreseken , value is a acceptable property for every input element, it's not the problem here.

He's question is about "checked" property that is not working as expected. If you create a

<input type="checkbox" checked />

It should be checked when you run on browser, and if you make it on blazor, are not checking. Take a look on above screen, first one is on Blazor page, the second one is on a pure html.

Edit: Even using checked="checked" not make checkbox selected.

[dlr1]

@brunopbarrote Thanks.
I was trying to get a checkboxlist working and was not able to get that working anyway I tried. so like @awulkan said, I copied html from that link to see if that would work.

[zbecknell]

The culprit is certainly value, but not sure why:

<input type="checkbox" checked /> Works
<input type="checkbox" value="coding" checked /> Does Not Work

Generated code:

base.BuildRenderTree(builder);
builder.OpenElement(7, "input");
builder.AddAttribute(8, "type", "checkbox");
builder.AddAttribute(9, "checked", "");
builder.CloseElement();
builder.AddContent(10, " Works\n            ");
builder.OpenElement(11, "input");
builder.AddAttribute(12, "type", "checkbox");
builder.AddAttribute(13, "value", "coding");
builder.AddAttribute(14, "checked", "");
builder.CloseElement();
builder.AddContent(15, " Does Not Work\n");

Edit:

And value is not actually rendering:

[zbecknell]

I'm going to take a shot at tracking this down in a few hours.

[zbecknell]

Ok, I still have a pretty shallow understanding of the codebase, but I've done some digging to discover what might be happening. I'm sure all of this is quite obvious for @SteveSandersonMS and @rynowak, and one of them will probably need to solve it.

Value Attribute Not Rendered

This happens because the value attribute is being treated specially for binding purposes. If you check out BrowserRenderer.ts you'll find this:

if (attributeName === 'value') {
  if (this.tryApplyValueProperty(toDomElement, renderTreeFrame.attributeValue(attributeFrame))) {
    return; // If this DOM element type has special 'value' handling, don't also write it as an attribute
  }
}

Checked State Not Reflected

Following the logic above, we can see that the checked state relies on the value attribute -- an empty string in the value attribute will cause the checkbox to render in the on state and a present string will render an off checkbox.

private tryApplyValueProperty(element: Element, value: string | null) {
  // Certain elements have built-in behaviour for their 'value' property
  switch (element.tagName) {
    case 'INPUT':
    case 'SELECT':
    case 'TEXTAREA':
      if (isCheckbox(element)) {
        (element as HTMLInputElement).checked = value === '';
      } else {
        (element as any).value = value;

So this:

<input type="checkbox" value="" /> Empty String
<br/>
<input type="checkbox" value="test" /> Present String 
<br/>
<input type="checkbox" checked /> No Value Attribute (checked attribute)
<br/>
<input type="checkbox" /> No Value Attribute (no checked attribute)

Will render this:

TL;DR: Some work needs to be done to support custom value attribute values on checkboxes.

[SteveSandersonMS]

Yes, we have repurposed value here and there may be an argument that we shouldn't in this case. However I'm not sure what you'd usefully do by setting a custom value attribute on a checkbox in a Blazor app, since that would normally only be used for an HTML form post, which is something people don't reasonably do in a SPA.

We'll have to give this further considation. Adding to backlog.

[awulkan]

"Yes, we have repurposed value here and there may be an argument that we shouldn't in this case."

I don't think default attributes should be repurpsed under any circumstance, unless it's really a dealbreaker if they are not.

For example in Vue you still have the default attributes, but then you can hook them up with vue by typing a colon infront of them, like :value="myValue" or :data-something="something".

[KnottStudios]

While this is a bug, a current workaround is to do something like this:
<input type="checkbox" id="coding" name="interest" bind=@coding>

This sets your coding variable to be bound to the input... i.e. when you click it, it updates your coding boolean variable... you can see this by putting @coding in the html page, like so:
<input type="checkbox" id="coding" name="interest" bind=@coding> @coding