i have another example of the same exception - "ja...

# kotlinx-html

[Reuben Firmin]

i have another example of the same exception - "java.lang.IllegalStateException: You can't change tag attribute because it was already passed to the downstream
at kotlinx.html.consumers.DelayedConsumer.onTagAttributeChange(delayed-consumer.kt:16)". in this case the component renders fine when it's part of the createHTMLDocument consumer (i.e. the original render) but fails when it's part of the appendHTML consumer. source in thread. why is this happening?

[Reuben Firmin]

source:

class TabBar(private val tabs: List<Tab>, consumer: TagConsumer<*>): DIV(mapOf(
    "class" to "text-xl font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 " +
            "dark:border-gray-700 pb-8"), consumer) {

    private val activeClasses = "inline-block p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg " +
            "active dark:text-blue-500 dark:border-blue-500"

    private val inactiveClasses = "inline-block p-4 border-b-2 border-transparent rounded-t-lg " +
            "hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"

    fun render(block: TabBar.() -> Unit) {
        ul("flex flex-wrap -mb-px") {
            [e-mail] { tab ->
                li("me-2") {
                    form {
                        a(classes = if (tab.current) {
                            [e-mail]
                        } else {
                            [e-mail]
                        }) {
                            href = "#"
                            htmxClick(this@form, tab.path, tab.target)
                                .params(tab.params)
                            if (tab.current) {
                               [e-mail]["aria-current"] = "page"
                            }
                            +tab.label
                        }
                    }
                }
            }
        }
        block()
    }
}

fun FlowContent.tabBar(tabs: List<Tab>, block: TabBar.() -> Unit = {}) {
    TabBar(tabs, consumer).visit {
        render(block)
    }
}

data class Tab(val label: String,
               val current: Boolean,
               val path: String,
               val target: String,
               val params: Map<String, String>)

[Reuben Firmin]

it fails on the [e-mail]["aria-current"] line, but again only when under appendHTML

[Reuben Firmin]

another weirdness: if I move the href below the tab.current check, it will fail in the createHTMLDocument consumer

[Cies]

Why [e-mail]? why not just

if (tab.current) { attributes["aria-current"] = "page"}

directly under the href = "#"

[Cies]

i dont know what htmxClick does... but you cannot add HTML arguments to a tag once you have started filling in the HTML tag's content.

[Reuben Firmin]

I did that first, same issue - the this@a was just superstition to make sure I was adding attributes to the right tag.

What constitutes content in this case, href? Or the label?

[Reuben Firmin]

Here's my htmxClick function:

fun HTMLTag.htmxClick(path: String, target: String): HTMLTag {
        attributes["hx-post"] = path
        attributes["hx-trigger"] = "click"
        attributes["hx-target"] = target
        attributes["hx-swap"] = "innerHTML"
        return this
    }

[Reuben Firmin]

I pasted the wrong htmxClick function, and that gave me an idea. This works:

fun render(block: TabBar.() -> Unit) {
        ul("flex flex-wrap -mb-px") {
            [e-mail] { tab ->
                li("me-2") {
//                    form {
                        a(classes = if (tab.current) {
                            [e-mail]
                        } else {
                            [e-mail]
                        }) {
                            href = "#"
                            htmxClick(tab.path, tab.target)
//                            htmxClick(this@form, tab.path, tab.target)
//                                .params(tab.params)
                            if (tab.current) {
                               attributes["aria-current"] = "page"
                            }
                            +tab.label
//                        }
                    }
                }
            }
        }
        block()
    }

So it's something about the form, and the form version of htmxClick, which is:

fun HTMLTag.htmxClick(form: FORM, path: String, target: String): FORM {
        attributes["hx-post"] = path
        attributes["hx-trigger"] = "click"
        attributes["hx-target"] = target
        attributes["hx-swap"] = "innerHTML"
        return form
    }

    fun FORM.params(params: Map<String, String>) {
        params.entries.forEach {
            input {
                type = InputType.hidden
                name = it.key
                value = it.value
            }
        }
    }

So I think what you're saying is because I'm adding these hidden inputs into the a tag itself (which is admittedly janky) then the subsequent setting of attributes fails.

[Cies]

<tag1 agr1="value arg1" arg2="value arg2">content of tag1<tag2>content tag 2</tag2></tag1>

[Cies]

all of tag2 is also content of tag1

[Cies]

im not sure why htmxClick returns this , we do not do that... also if htmxClick only works on a tags, put it on A instead of on all htmlTags

[Reuben Firmin]

it can actually go on any tag. i was returning this just so i could stick params on in a builder pattern. with some lightweight refactoring, the form approach now works:

fun render(block: TabBar.() -> Unit) {
        ul("flex flex-wrap -mb-px") {
            [e-mail] { tab ->
                li("me-2") {
                    form {
                        htmxParams(tab.params) // <<<<<<
                        a(classes = if (tab.current) {
                            [e-mail]
                        } else {
                            [e-mail]
                        }) {
                            href = "#"
                            htmxClick(this@form, tab.path, tab.target)
                            if (tab.current) {
                               attributes["aria-current"] = "page"
                            }
                            +tab.label
                        }
                    }
                }
            }
        }
        block()
    }

so now the hidden inputs go into the form above the a

[Reuben Firmin]

that was helpful, thanks

[Cies]

welcome! glad it helped!!