The onInput() callback fires before imask.js finishes updating the value

[EugeneAksyonov]

KVision: 9.1.0

So the problem appears only when maskOptions member initialized with ImaskOptions() pattern. When I enter value into an empty input (value = null) than I expect that value of the Text() Input is changed immediately and can be processed on onInput() subscriber call. So happens without the masked option. When imask is configured the entered value is processed by imask, but onInput() fires earlier than Input's new value become actual. For example if you set mask to filter 6 digits and you expect them be entered sequentially one by one 1,2,3,4,5,6 then you read onInput() callback values null,1,12,123,1234,12345. If you then remove focus from the input, you get onChange() fired with updated value 123456.
You can reproduce it by constructing the custom input object:

class TestInputWithMask (
    inputValue: String? = null,
    inputLabel: String? = null,
    onValue: ((String?) -> Unit)? = null,
): Text(floating = true) {
    init {
        value = inputValue
        label = inputLabel
        placeholder = inputLabel
        maskOptions = ImaskOptions(pattern = PatternMask("000 000", lazy = true, eager = true))

        onInput {
            it.stopPropagation()
            println(" value onInput => ${this.value}")
            onValue?.invoke(this.value)
        }

        onChange {
            it.stopPropagation()
            println(" value onChange => ${this.value}")
            onValue?.invoke(this.value)
        }
    }
}

fun Container.testInputWithMask (
    inputValue: String? = null,
    inputLabel: String? = null,
    onValue: ((String?) -> Unit)? = null,
): TestInputWithMask {
    return TestInputWithMask(
        inputValue,
        inputLabel,
        onValue ).also { add(it) }
}

and call it from app.kt like:

testInputWithMask(
       inputValue = s.otp.code,
       inputLabel = "Key",
       onValue = { value ->
             println(" code ==> $value")
       }
)

Output:

[rjaros]

Hello and sorry for the very late response. Unfortunately, there is no way to delay the input event in such a way that a value already processed by Imask can be read. But as a workaround you can just replace onInput {} with subscribe {} method.

subscribe {
    println(" value onInput => ${this.value}")
    onValue?.invoke(this.value)
}