From 2936f06576997bffe7903ea840df563a408efc21 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 9 Aug 2020 18:46:05 +0200
Subject: Improve autocompletion usage

---
 src/View/Form/Autocomplete.ml | 62 ++++++++++++++++++++++++++-----------------
 1 file changed, 38 insertions(+), 24 deletions(-)

(limited to 'src/View/Form/Autocomplete.ml')

diff --git a/src/View/Form/Autocomplete.ml b/src/View/Form/Autocomplete.ml
index 2770e16..98e4b43 100644
--- a/src/View/Form/Autocomplete.ml
+++ b/src/View/Form/Autocomplete.ml
@@ -1,6 +1,5 @@
 let search s xs =
-  let results = Js.Array.filter (Js.String.includes s) xs in
-  if Js.Array.length results == 1 && results.(0) == s then [| |] else results
+  Js.Array.filter (Js.String.includes s) xs
 
 let render_completion render_entry on_select entries =
   H.div
@@ -38,29 +37,44 @@ let create attrs id values render_entry on_input =
     Element.mount_on completion (H.text "")
   in
 
+  let
+    input =
+      H.input
+        (HA.concat
+          attrs
+          [| HA.id id
+          ;  HA.class_ "g-Autocomplete__Input"
+          ;  HA.autocomplete "off"
+          ;  HE.on_focus (fun e ->
+              let target = Event.target e in
+              let value = Element.value target in
+              update_completion target value)
+          ;  HE.on_input (fun e ->
+              let target = Event.target e in
+              let value = Element.value target in
+              let () = update_completion target value in
+              on_input value)
+          |])
+        [| |]
+  in
+
+  let () =
+    Element.add_event_listener input "blur" (fun e ->
+      if Js.isNullable (Event.related_target e) then
+        hide_completion ())
+  in
+
   H.div
     [| HA.class_ "g-Autocomplete" |]
-    [| H.input
-      (HA.concat
-        attrs
-        [| HA.id id
-        ; HA.class_ "g-Autocomplete__Input"
-        ; HA.autocomplete "off"
-        ;  HE.on_click (fun e ->
-            let target = Event.target e in
-            let value = Element.value target in
-            update_completion target value)
-        ;  HE.on_input (fun e ->
-            let target = Event.target e in
-            let value = Element.value target in
-            let () = update_completion target value in
-            on_input value)
-        ; HE.on_blur (fun _ ->
-            let _ = Js.Global.setTimeout
-              (fun _ -> hide_completion ())
-              100
-            in ())
-        |])
-      [| |]
+    [| input
     ;  completion
+    ;  Button.raw
+        [| HA.class_ "g-Autocomplete__Clear fa fa-close"
+        ;  HA.type_ "button"
+        ;  HE.on_click (fun _ ->
+            let () = on_input "" in
+            let () = Element.set_value input "" in
+            Element.focus input)
+        |]
+        [| |]
     |]
-- 
cgit v1.2.3