Section created as extension function does not update when livevar changes

[Essay97]

Hello, I'm quite sure this is not a bug, just me not grasping some concept of Kotter, but I didn't know how to get help.

I tried to extract a component to the following function:

fun Session.yesNoSelector(prompt: String, currentState: Boolean, toggleState: () -> Unit) {
    section {
        text(prompt)
        if (currentState) {
            text(" ["); underline { text("Yes") }; text("]  No ")
        } else {
            text("  Yes  ["); underline { text("No") }; text("]")
        }
    }.runUntilKeyPressed(Keys.ENTER) {
        onKeyPressed {
            if (key == Keys.LEFT || key == Keys.RIGHT) {
                toggleState()
            }
        }
    }
}

The function, in the session, is called called like this:

session {
        var ready by liveVarOf(false)
        yesNoSelector("Are you ready?", ready) { ready = !ready }
}

This should show a prompt like the one below and switch parentheses and underline between Yes and No when left or right arrow is pressed:

Unfortunately I don't see this behavior, I think that the created section "does not know" that the liveVar changed and does not get rerendered.
Is there any way I can implement this? I did not create the liveVar inside the yesNoSelector because I want to access the result in other sections.

Thanks in advance!

Desktop:

• OS: iOS
• Version Ventura 13.5.1

[bitspittle]

So sorry I never responded to this. I didn't get a notification!

Basically what you noticed is correct, it's not a bug -- once you pass a boolean value from a by call into a function, Kotlin stops being able to delegate changes to it. A copy is essentially happening.

What you would need to do is this:

fun Session.yesNoSelector(..., currentStateLive: LiveVar<Boolean>, ...) {
   var currentState by currentStateLive
   ...
}

session {
   val currentStateLive = liveVarOf(false)
   yesNoSelector(..., currentStateLive)
}

something like that.