Add test for HtmlRef in template

fsbolero · Apr 11, 2023 · 501965a · 501965a
1 parent 7fcf2b8
commit 501965a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/tests/Client/Main.fs b/tests/Client/Main.fs
@@ -21,6 +21,7 @@
 module Bolero.Test.Client.Main
 
 open Microsoft.AspNetCore.Components.Routing
+open Microsoft.AspNetCore.Components
 open Microsoft.JSInterop
 open Elmish
 open Bolero
@@ -154,9 +155,13 @@ type CollectionTemplate = Template<"collection.html">
 type ViewItem() =
     inherit ElmishComponent<int * string, Message>()
 
+    let inputRef = HtmlRef()
+
     override this.View ((k, v)) dispatch =
         CollectionTemplate.Item()
             .Value(v)
+            .InputRef(inputRef)
+            .Focus(fun _ -> inputRef.Value.Value.FocusAsync() |> ignore)
             .SetKey(fun _ -> dispatch (SetKeyOf k))
             .Remove(fun _ -> dispatch (RemoveItem k))
             .Url(router.Link (Item k))

diff --git a/tests/Client/collection.html b/tests/Client/collection.html
@@ -12,7 +12,8 @@
 <template id="Item">
   <li>${Value}</li>
   <li>
-    <input>
+    <input ref="${InputRef}">
+    <button onclick="${Focus}">Focus the input box</button>
     <button onclick="${SetKey}">Set key from Add field</button>
     <button onclick="${Remove}">Remove</button>
     <a href="${Url}">Go to page</a>