UI.Next Doc.SelectDyn not selecting item

[AlexPeret]

Hi!

I'm facing an (intermittent) issue with Doc.SelectDyn not selecting the correct item from its list.

The data (both the list of item and the selected item) are loaded from database through a RPC function. This is how I'm doing:

1. create a empty component

// empty values for now, but will be replaced later on
let rvOption = Var.Create (0,"")
let rvOptionList = Var.Create [0,""]

let combobox = 
    Doc.SelectDyn 
	[ attr.``class`` "form-control" ] (fun (k,v) -> v) rvOptionList.View rvOption

note: combobox is assigned to a Template field later on

2. load data from database through RPC

async {
    let! response = Services.LoadData ()
    match response with
    | Error err -> ...
    | Success model ->
	bindModel model
} |> Async.Start

note: model contains all form data, including the list of items and the selected value.

3. bind model to form fields

let bindModel (p:DbDataDTO) = 
    ...
    rvOptionList.Value <- p.OptionList
    ...
    rvOption.Value <- p.Option
    ...

This will work sometimes, but whenever opening the page again, it won't select the correct item anymore.

After some debugging, I believe the issue is due the sequence of Vars being executed in incorrect order (probably due to some DOM lagging). Changing the bindModel function and adding some delay, makes it work:

let bindModel (p:MyDataDTO) = 
    ...
    let bindSelectedOption () =
	rvOption.Value <- p.Option

    let h = JS.SetTimeout bindSelectedOption 1000

    rvOptionList.Value <- p.OptionList
    ...

Is there a way to tie the assignment of rvOption to rvOptionList? or maybe a better workaround?

UI.Next version: 3.6.18.2

Thanks,
Alex

[AlexPeret]

hi!

I'm still facing this issue on version 4.1.0.162.

Below, a smaller function to help you debug it.

    let SelectDynText () =
        let rvOption = Var.Create (0,"opt 1")
        let rvOptionList = Var.Create [0,"opt 1"; 1,"opt 2"]

        let combobox = 
            Doc.SelectDyn 
                [ attr.``class`` "form-control" ] (fun (k,v) -> v) rvOptionList.View rvOption
        
        async {
            // emulate a server call delay
            do! Async.Sleep (2000)

            let opt = 4,"opt 4"
            let optionList = [3,"opt 3"; 4,"opt 4"; 5,"opt 5"]
            rvOptionList.Value <- optionList

            // without this pause, the selected item is "opt 5" on Firefox
            // uncomment the line below to fix it
            // do! Async.Sleep (2000)
            rvOption.Value <- opt
        }
        |> Async.Start

        combobox

Thanks,
Alex

[AlexPeret]

I've found a workaround that seens to solve the problem.

By embeding the selectbox element in the list view, the correct element is selected.

    let SelectDynText () =
        let rvOption = Var.Create (0,"opt 1")
        let rvOptionList = Var.Create [0,"opt 1"; 1,"opt 2"]
        let vOptList = rvOptionList.View

        let combobox = 
            vOptList 
            |> View.Map (fun _ ->
                let combobox = 
                    Doc.SelectDyn 
                        [ attr.``class`` "form-control" ] (fun (k,v) -> v) vOptList rvOption
                combobox :> Doc
            )
            |> Doc.EmbedView

        async {
            // emulate a server call delay
            do! Async.Sleep (2000)

            let opt = 4,"opt 4"
            let optionList = [3,"opt 3"; 4,"opt 4"; 5,"opt 5"]
            rvOptionList.Value <- optionList
            rvOption.Value <- opt
        }
        |> Async.Start

        combobox

Regards,
Alex