String cval gets reset after int cval changes

[AngelMunoz]

I was recording a short video on Fun.Blazor but halfway through the recording I found something a little bit odd, when writing the username value in the input the value would update but after clicking on the button counter it would reset the username value to an empty string, but it doesn't happen the other way around

NOTE: If you put the string cval first it doesn't happens anymore

[<AutoOpen>]
module FunSample.App

open FSharp.Data.Adaptive
open Fun.Blazor

let app =
    adaptiview () {
        // let! username, setUsername = cval("").WithSetter() // <-- bug doesn't happen here
        let! count, setCount = cval(1).WithSetter()
        let! username, setUsername = cval("").WithSetter() // <-- bug happens here

        div {
            div { $"Here is the count {count} and username {username}" }

            button {
                onclick (fun _ -> setCount (count + 2))
                "Increase by 2"
            }

            input {
                placeholder "What's your username?"
                value username
                oninput (fun event -> event.Value :?> string |> setUsername)
            }
        }
    }

[albertwoo]

@AngelMunoz This is expected. It is they way of Fsharp.data.adaptive. If the count changes it will reevaluate it's following expression, so the new cval will be created. So to make your demo work. You can do this:

let demo =
    html.inject(fun () ->
        // In this way, the cval reference will be kept for the whole lifetime of current component
        let count = cval 1
        let userName = cval ""

        adaptiview () {
        let! count, setCount = count.WithSetter()
        let! username, setUsername = username.WithSetter()

        div {
            div { $"Here is the count {count} and username {username}" }

            button {
                onclick (fun _ -> setCount (count + 2))
                "Increase by 2"
            }

            input {
                placeholder "What's your username?"
                value username
                oninput (fun event -> event.Value :?> string |> setUsername)
            }
        }
    )

[AngelMunoz]

Hmm I see, I kind of understand why then thanks I'll close this one