From 1227afe7647eb32be3d8d4a46a47f0afe84407f4 Mon Sep 17 00:00:00 2001
From: Szymon Fiedler <szymon.fiedler@gmail.com>
Date: Fri, 22 Mar 2024 10:24:42 +0100
Subject: [PATCH] Replace use of datalist with ul
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Datalist was nice for spike, but it behaves strangely in our usecase
when it's dynamically generated based on typeahead search — correct
results were shown after putting one additional character than
required.

It also can't be styled.

Current solution doesn't have keyboard support, but it will be added
eventually.
---
 ruby_event_store-browser/elm/src/Search.elm | 29 +++++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/ruby_event_store-browser/elm/src/Search.elm b/ruby_event_store-browser/elm/src/Search.elm
index fa30bb0223..b54f90d32e 100644
--- a/ruby_event_store-browser/elm/src/Search.elm
+++ b/ruby_event_store-browser/elm/src/Search.elm
@@ -2,7 +2,7 @@ module Search exposing (..)
 
 import FeatherIcons
 import Html exposing (..)
-import Html.Attributes exposing (autofocus, class, id, list, placeholder, value)
+import Html.Attributes exposing (autofocus, class, href, placeholder, value)
 import Html.Events exposing (onInput, onSubmit)
 import List
 import Task
@@ -84,7 +84,6 @@ view model =
                 , value model.value
                 , onInput StreamChanged
                 , placeholder "Quick search…"
-                , list "streams"
                 , autofocus True
                 ]
                 []
@@ -92,10 +91,30 @@ view model =
                 [ span [ class "text-gray-500 bg-gray-50 font-bold block p-1 border border-gray-300 rounded " ] [ text "ESC" ]
                 ]
             ]
-        , datalist
-            [ id "streams", class "appearance-none" ]
+        , if model |> streamsPresent then
+            viewList model
+
+          else
+            text ""
+        ]
+
+
+viewList : Model a -> Html Msg
+viewList model =
+    div
+        []
+        [ ul [ class "mt-4 h-80 overflow-auto space-y-2 w-full" ]
             (List.map
-                (\stream -> option [] [ text stream ])
+                (\stream ->
+                    li []
+                        [ a [ class "p-3 block rounded hover:bg-red-200 w-full bg-gray-100 break-words text-xs font-bold font-mono", href ("/streams/" ++ stream) ] [ text stream ]
+                        ]
+                )
                 model.streams
             )
         ]
+
+
+streamsPresent : Model a -> Bool
+streamsPresent { streams } =
+    not <| List.isEmpty streams