Issues with TextBox onTextChange and Elmish

[sixilli]

I've been struggling with this issue. I believe that onTextChange is modifying an event it shouldn't. I found this message and the URL of the newRequest should never be set to the value it has.

To explain the architecture I have an itemStore that elmish is listening to as a subscriber. The itemStore keeps track of the selected item and the state of all items. I then have a sidebar and editor component. The sidebar on click opens up the item to be edited. Rapidly clicking between requests causes the url to get wrongly set in the state. For some reason rapidly clicking between requests causes onTextChange to fire. The url url = "cyan is cool" in the update is from a different item.

Updated subs:: [["itemsChanged"]; ["selectedChanged"]]
New message:: RequestEditorMsg
  (UpdateRequest { oldRequest = { name = "test"
                                  method = GET
                                  url = "http://www.google.com"
                                  requestParameters = "todo"
                                  createdAt = 1/28/2024 1:36:59 PM
                                  updatedAt = 1/28/2024 1:36:59 PM }
                   newRequest = { name = "test"
                                  method = GET
                                  url = "cyan is cool"
                                  requestParameters = "todo"
                                  createdAt = 1/28/2024 1:36:59 PM
                                  updatedAt = 1/28/2024 1:36:59 PM } })

Editor view that is likely the issue

    let addressBar (state : State) (dispatcher : Msg -> unit) (request : Request) =
        DockPanel.create [
            DockPanel.dock Dock.Top
            DockPanel.children [
                TextBox.create [
                    TextBox.text (string request.url)
                    TextBox.onTextChanged ((fun text ->
                        match text with
                        | newUrl when newUrl <> request.url ->
                            dispatcher (UpdateRequest { oldRequest = request; newRequest = { request with url = text } })
                        | _ -> () ), SubPatchOptions.OnChangeOf request)
                    TextBox.horizontalAlignment HorizontalAlignment.Stretch
                ]
            ]
        ]
    let requestEditor (state : State) (dispatcher : Msg -> unit) (request : Request) =
        DockPanel.create [
            DockPanel.children [
                TextBlock.create [
                    TextBlock.text request.name
                ]
                addressBar state dispatcher request
            ]
        ]

    let view (state : State) (dispatcher : Msg -> unit) =
        DockPanel.create
            [ Grid.column 2
              DockPanel.children
                  [ match state.selectedRequest with
                    | Some request -> requestEditor state dispatcher request
                    | None -> emptyDisplay state dispatcher ] ]

Editor update

 let update msg state (itemStore : ItemStore.Observer) =
        match msg with
        | SendRequest request -> state, Cmd.none, None
        | SetSelectedRequest request ->
            itemStore.UpdateSelected (Some request)
            state, Cmd.none, None
        | UpdateRequest update ->
            itemStore.UpdateItem update
            state, Cmd.none, None

Link to project: https://github.com/sixilli/funcman/tree/main/src/App

EDIT: I fixed this by adding a GUID to every item. This way I could easily check if the selected request, updated request and old request all align when attempting to update the item store. This solution is not ideal and still seems to break sometimes. It's very odd to me that the state is jumping around. I'd still very much like a way to do this that would essentially never bug out.