Back to Questions
920
views2
comments
UI.Next - focus lost on UI state update
websharperwebsharper ui.next

Hi,

I was wondering how to implement in UI.Next a pattern often used with react React, where a single variable contains the whole UI state, which through views is passed down to UI components, together with callbacks to update the UI state on events. I think this is a great way to build UIs with reusable components.

So I tried to rewrite the basic example from the UI.Next documentation as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

namespace StringEditor

open WebSharper
open WebSharper.JavaScript
open WebSharper.UI.Next


[<JavaScript>]
module Client =
    
    let stringEditor (view: View<string>) (onInput: string -> unit) =
        view
        |> View.Map (fun currentValue -> Doc.Element
                                             "input"
                                             [Attr.Create "value" currentValue
                                              Attr.Handler "input" (fun e -> onInput (box e.CurrentTarget)?value)]
                                             [])
        |> Doc.EmbedView

    let Main =
        let rv = Var.Create ""
        let rview = rv.View
        Html.Div0 [
            stringEditor rview (Var.Set rv)
            Html.Br0 []
            Html.Label [] [Doc.TextView rview]]
        |> Doc.RunById "content"

This works, in that the text typed in the input is copied to the label; but the input loses focus after each character typed.

Am I doing something wrong? Is there a better approach to building UI components with UI.Next?

.

Putting the document inside a View.Map makes it regenerate every time the view is changed. What you probably want here is to only make the "value" attribute depend on the view:

1
2
3
4
5

    let stringEditor (view: View<string>) (onInput: string -> unit) =
        Doc.Element "input"
            [Attr.Dynamic "value" view
             Attr.Handler "input" (fun e -> onInput (box e.CurrentTarget)?value)]
            []
By on 4/16/2015 12:51 PM ()

Makes sense. Thank you!

By on 4/17/2015 11:07 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper