Materialize: Form checkboxes not working properly with htmlfor attribute

[alejo-moreno]

There are cases where DOM is dynamically generated or parsed as it happens in React or when using composable DOM elements libraries as bel.

Where this case

`<form action="#">
    <p>
      <input type="checkbox" id="test5" />
      <label for="test5">Red</label>
    </p>
  </form>
`

is parsed as

<form action="#">
    <p>
      <input type="checkbox" id="test5" />
      <label htmlfor="test5">Red</label>
    </p>
</form>

this changes for attribute to htmlfor according to W3C Recommendation and getting checkbox controls not working properly.

[acburst]

Hmm why does React do that? Does htmlfor work the same as for by passing along focus?

[alejo-moreno]

Apparently they do that to match the DOM API specification. So it would be better if htmlfor is used instead or at least to have support to both of them for and htmlfor.

MDN reference

[Dogfalo]

Is react setting the property properly? It should work if the attribute is
passed along to the element property

On Wednesday, June 22, 2016, alejo-moreno [email protected] wrote:

Apparently they do that to match the DOM API specification
https://facebook.github.io/react/docs/tags-and-attributes.html#supported-attributes.
So it would be better if _htmlfor_ is used instead or at least to have
support to both of them _for_ and _htmlfor_.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/Dogfalo/materialize/issues/3290#issuecomment-227859836,
or mute the thread
https://github.com/notifications/unsubscribe/ACpax3xxpTWtWCZvAkcRcgUulsB92Nx4ks5qOZTdgaJpZM4I6wI6
.

Doggy sends his greetings from Mars.

[acburst]

But htmlfor doesn't actually pass focus does it? That's the reason we use it.

[alejo-moreno]

I believe it doesn´t pass the focus. I also tried nesting the input inside the label but it didn't worked neither. I had to do this for a temporary solution.

    $("label").each(function(index) {
        var currentVal = $(this).attr("htmlfor");
        $(this).attr({ for: currentVal }).removeAttr('htmlfor')
    })

[stef-k]

I have the same issue with Django template, using the following code:

<p>
    <label for="{{ form.remember.id_for_label }}">{% trans "Remember Me" %}:</label>
    <input type="checkbox"
           name="{{ form.remember.html_name }}"
           id="{{ form.remember.id_for_label }}"/>
</p>

The checkbox and the respective label are rendering behind the submit button as seen bellow

The following works

    <p>
      <input type="checkbox" id="test5" />
      <label for="test5">Red</label>
    </p>

Maybe it has something to do with the dynamic generated parts of the widgets?

[fega]

Closed due inactivity, feel free to reopen it if it is still necessary, in that case, please provide a way to reproduce it. like a codepen.