Delayed IntField

import { h, render } from "preact"
import { useRef } from "preact/hooks"
import { signal, effect } from "preact/signals"
import { TouchScreenKeyboard } from "UnityEngine"
import { ChangeEvent, InputEvent, IntegerField } from "UnityEngine/UIElements"

const sigVal = signal(123)

effect(() => {
    console.log("Signal value:", sigVal.value)
})

const App = () => {
    const ref = useRef<Element>()

    function onValueChanged(e: ChangeEvent<number>) { // for regular keyboard handling
        sigVal.value = e.newValue
    }

    function onInput(e: InputEvent) { // for screen keyboard handling
        const intfield = ref.current!.ve as IntegerField
        const keyboard = intfield.touchScreenKeyboard
        if (keyboard && keyboard.status === TouchScreenKeyboard.Status.Done) {
            sigVal.value = parseInt(e.newData)
        }
    }

    return <div class="w-full h-full py-20 flex-row justify-center items-start">
        <integerfield ref={ref} value={sigVal.value} onValueChanged={onValueChanged} is-delayed={true} onInput={onInput} />
    </div>
}

render(<App />, document.body)

import { h, render } from "preact"
import { useRef } from "preact/hooks"
import { signal, effect } from "preact/signals"
import { TouchScreenKeyboard } from "UnityEngine"
import { ChangeEvent, InputEvent, IntegerField } from "UnityEngine/UIElements"

const sigVal = signal(123)

effect(() => {
    console.log("Signal value:", sigVal.value)
})

const App = () => {
    const ref = useRef<Element>()

    function onValueChanged(e: ChangeEvent<number>) { // for regular keyboard handling
        sigVal.value = e.newValue
    }

    function onInput(e: InputEvent) { // for screen keyboard handling
        const intfield = ref.current!.ve as IntegerField
        const keyboard = intfield.touchScreenKeyboard
        if (keyboard && keyboard.status === TouchScreenKeyboard.Status.Done) {
            sigVal.value = parseInt(e.newData)
        }
    }

    return <div class="w-full h-full py-20 flex-row justify-center items-start">
        <integerfield ref={ref} value={sigVal.value} onValueChanged={onValueChanged} is-delayed={true} onInput={onInput} />
    </div>
}

render(<App />, document.body)