TreeView behavior

[konst-sh]

I have a treeView of text boxes which hierarchically display some user input text data, I'd like to keep those text boxes editable and update the state with new text values by handling onTextChanged events. The issue is that every time I print new character the model get updated and the treeView is regenerated in collapsed state and the further text input is not possible. I was trying to specify TextView.isOpen true but it doesn't make any difference - the tree view is still collapsed. Is there any approach that would allow to delay the model update until the text edit is done? Or to prevent the treeView from collapsing on update?
I could use another event handler for sending the model update message - for example on Enter button pressed - but it doesn't provides text content of the textBox. Is there any approach to get the text of text box for the key event if my app is not component-based and I'm not using hooks?
If onTextChanged was native FSharp Event object I could try to use Event.scan to handle the series of inputs based on the time from last edit or something like that but I was not able to find how to get the Event or IObservable from IView or IAttr.
Any suggestions please?

[JaggerJo]

Can you paste a small runnable example?

[konst-sh]

Hope this is not too long - note how the treeView collapses every time you update the model with any message, this becomes a problem when the input field is inside the treeView itself - basically you only able to make one character per time input.

namespace Tree_view_test

open Elmish
open Avalonia.Controls
open Avalonia.FuncUI.DSL
open Avalonia.FuncUI
open Avalonia.FuncUI.Elmish
open Avalonia.Layout

module TreeViewDemo =

    type Hierarchy = {
        Divider: int
        DividerIndex: int
        Items: int array
        AreDivisible: bool
        Children: Hierarchy seq
    }
    with
        static member ofArray(arr: int array) (dividers: int array) =
            let mapDefault (key, value) (m: Map<_,_>) =
                if Map.containsKey key m
                then m
                else Map.add key value m
            
            let groupByDivider d arr =
                arr
                |> Array.groupBy(fun i -> i % d = 0)
                |> Map.ofArray
                |> mapDefault (true, [||])
                |> mapDefault (false, [||])
                |> Map.toList

            let rec loop (dividers: (int*int) list) (arr: int array) =
                match dividers with
                | [dInd, d] ->
                    groupByDivider d arr
                    |> List.map(fun(areDiv, items) ->
                        {
                            Divider = d; DividerIndex = dInd
                            Items = items
                            AreDivisible = areDiv
                            Children = items |> Array.map(fun item -> 
                                    {Divider = item; DividerIndex = dInd; Items = [|item|]; AreDivisible = true; Children =[||]}
                                )
                        }
                    )
                | (dInd, d)::ds ->                    
                    groupByDivider d arr
                    |> List.map(fun(areDiv, items) ->
                        {
                            Divider = d; DividerIndex = dInd
                            Items = items
                            AreDivisible = areDiv
                            Children = items |> loop ds
                        }
                    )

            
            let dividers = List.ofArray dividers |> List.indexed//[2; 3; 5]
            //loop dividers [|4;7;9;10;2;3;5;8;25|]

            loop dividers arr

    type State =
        { numbers: int array; dividers: int array }

    let init () =
        { numbers = [||]; dividers = [|2; 3; 5|] }

    let randomInt =
        let rnd = new System.Random()
        fun () -> rnd.Next(0, 100)

    type Msg =
    | AppendNumber
    | ChangeDivider of index: int * value: int

    let update (msg: Msg) (state: State) : State =
        match msg with
        | AppendNumber -> {state with numbers = state.numbers|> Array.append [|randomInt()|]}
        | ChangeDivider(index, value) -> {state with dividers = state.dividers |> Array.updateAt index value}
           
    let view (state: State) (dispatch) =
        DockPanel.create [
            DockPanel.children [
                TreeView.create [
                    TreeView.dock Dock.Top
                    TreeView.isOpen true
                    TreeView.dataItems (Hierarchy.ofArray state.numbers state.dividers)
                    TreeView.itemTemplate (
                        DataTemplateView<Hierarchy>.create(
                            (fun data -> data.Children ), 
                            fun data -> 
                                let items = data.Items|> Array.map string |> String.concat "; "
                                let divisible = if data.AreDivisible then "Divisible" else "Non divisible"
                                
                                StackPanel.create[
                                    StackPanel.orientation Orientation.Horizontal
                                    StackPanel.children[
                                        TextBlock.create[
                                            TextBlock.verticalAlignment VerticalAlignment.Center
                                            TextBlock.text "Divider "
                                        ]
                                        TextBox.create[
                                            TextBox.text (string data.Divider)
                                            TextBox.onTextChanged(fun text ->
                                                try
                                                    let value = System.Int32.Parse text
                                                    dispatch <| ChangeDivider(data.DividerIndex,value)
                                                with
                                                    | _ -> ()
                                            )
                                        ]
                                        TextBlock.create [
                                            TextBlock.verticalAlignment VerticalAlignment.Center
                                            TextBlock.text $"{divisible} Items = [{items}]"
                                        ]
                                    ]
                                ]
                        )
                    )
                ]

                Button.create[
                    Button.dock Dock.Bottom
                    Button.horizontalAlignment HorizontalAlignment.Center
                    Button.verticalAlignment VerticalAlignment.Bottom
                    //Button.clipToBounds true
                    Button.content "Add random int"
                    Button.onClick(fun _ -> dispatch(AppendNumber))
                ]
            ]
        ]

open Avalonia
open Avalonia.Controls.ApplicationLifetimes
//open Avalonia.Diagnostics
//open Avalonia.Input
//open Avalonia.FuncUI
//open Avalonia.FuncUI.Elmish
open Avalonia.Themes.Fluent
open Avalonia.FuncUI.Hosts

type MainWindow() as this =
    inherit HostWindow()
    do
        base.Title <- "Tree_view_test"
        base.Width <- 400.0
        base.Height <- 400.0
        
        //this.VisualRoot.VisualRoot.Renderer.DrawFps <- true
        //this.VisualRoot.VisualRoot.Renderer.DrawDirtyRects <- true

        Elmish.Program.mkSimple (fun () -> TreeViewDemo.init()) TreeViewDemo.update TreeViewDemo.view
        |> Program.withHost this
        |> Program.run

        
type App() =
    inherit Application()

    override this.Initialize() =
        this.Styles.Add (FluentTheme(baseUri = null, Mode = FluentThemeMode.Light))

    override this.OnFrameworkInitializationCompleted() =
        match this.ApplicationLifetime with
        | :? IClassicDesktopStyleApplicationLifetime as desktopLifetime ->
            desktopLifetime.MainWindow <- MainWindow()
        | _ -> ()

module Program =

    [<EntryPoint>]
    let main(args: string[]) =
        AppBuilder
            .Configure<App>()
            .UsePlatformDetect()
            .UseSkia()
            .StartWithClassicDesktopLifetime(args)

[konst-sh]

One thing I found that presumably could solve the issue with tree collapsing is this member in the FSI file of the TreeView type:

  ///<summary>
  ///            Expands the specified <see cref="T:Avalonia.Controls.TreeViewItem" /> all descendent <see cref="T:Avalonia.Controls.TreeViewItem" />s.
  ///            </summary>
  ///<param name="item">The item to expand.</param>
  member ExpandSubTree: item: TreeViewItem -> unit

However I don't see anything similar in the extensions members of the attribute constructors for this component.
Is there some way to hook into the TreeView value itself to make edits on the lower level? Or I have to make custom binding for this member?

[Numpsy]

You can use createWithOutlet (e.g.

Avalonia.FuncUI/src/Examples/Component Examples/Examples.DrawingApp/Program.fs

Line 31 in 1b397dd

View.createWithOutlet canvasOutlet.Set Canvas.create [

) to get hold of a control that you can use directly if needed.

[konst-sh]

@Numpsy Nice, thanks, this part just clicked to me. If only there were descriptions on extension methods.