F#
HTML
Result
Hosted on
Try WebSharper
<
>
namespace Repro open WebSharper open WebSharper.UI.Next open WebSharper.UI.Next.Html open WebSharper.UI.Next.Client [<JavaScript>] module Lensing = type Person = { Name: string; Aliases: ListModel<string, string> } let aliases = ListModel.Create id [ "Bill"; "Joe" ] let person = Var.Create { Name = "Bob"; Aliases = aliases } let personName = person.Lens (fun p -> p.Name) (fun p n -> { p with Name = n }) let getPersonAlias alias = aliases.LensInto id (fun a n -> n) alias let Main = let cls s = attr.``class`` s let content = div [ Doc.Input [] personName span [text "This input works correctly - text is reactively updated below."] br [] aliases.View.DocSeqCached (fun (alias: string) -> div [ Doc.Input [] (getPersonAlias alias) span [text "This input loses focus after every key press."] br [] ] ) div [ hr [] Doc.TextView personName.View ] aliases.View.DocSeqCached (fun (alias: string) -> div [ Doc.TextView (getPersonAlias alias).View br [] ] ) ] Doc.RunById "main" content
<html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> </head> <body> <div id="main"></div> <!--[BODY]--> </body> </html>