chrome warning Invalid DOM property `for`. Did you mean `htmlFor`

[nailgilaziev]

this code snippet uses htmlFor but chrome throw error

            input(type = InputType.checkBox) {
                attrs.id = "showDeleted"
            }
            label {
                attrs.htmlFor = "showDeleted"
                +"Показать удаленные"
            }

[cy6erGn0m]

What is attrs ? kotlinx.html itself does set attributes through setAttribute that will never warn about it

[weickmanna]

Running into this same issue. The problem is this binding in kotlinx.html:

    var htmlFor : String
        get()  = attributeStringString.get(this, "for")
        set(newValue) {attributeStringString.set(this, "for", newValue)}

It binds "htmlFor" to "for"

[weickmanna]

I tried to create a PR to fix this issue, but looking at the code, it says that the Kotlin file was "generated by module generate" and should not be edited. The generate module nowhere mentions the htmlFor attribute, so I wonder how var htmlFor : String even made it into this file ...

The general complication here is that the HTML attribute name does not match the JavaScript accessor name. The Kotlin wrappers are generated from an HTML5 XSD schema, which of course only contains the name of the HTML attribute. So a special case must be made to replace "for" with "htmlFor" in get-tags-l.kt. It seems that this special treatment has actually been done (how would var htmlFor: String otherwise get included into the file?), but it was done only half-way and I cannot see how it was done (was the file edited directly even though the comment says it should not be edited?).

[fluidsonic]

This is an issue with Kotlin React, not with kotlinx-html. I've opened https://github.com/JetBrains/kotlin-wrappers/issues/365 for that.