Prevent search item from being made active just because mouse pointer is already over it

Author: hilverd

CHANGELOG.md

@@ -24,6 +24,7 @@ This applies from version 0.5.0 onwards, as some versions before that have broke
 - Fix issues with back/forward buttons.
 - Stop using [:target](https://developer.mozilla.org/en-US/docs/Web/CSS/:target) for styling item pointed to by fragment identifier, as it [doesn't work well with back/forward buttons](https://github.com/whatwg/html/issues/639). Handle highlighting of item that has "focus" in JavaScript instead.
 - Prevent having multiple items with the same fragment identifier. The fragment identifier for an item is its disambiguated preferred term, with spaces replaced by underscores.
+- Prevent search item from being made active just because mouse pointer is already over it.
 
 ### Removed
 

src/Components/SearchDialog.elm

@@ -5,12 +5,12 @@ port module Components.SearchDialog exposing
     , SearchResult
     , hide
     , init
-    , makeFirstSearchResultActive
     , onChangeSearchString
     , onHide
     , onShow
     , searchResult
     , searchResultHref
+    , searchStringWasJustUpdated
     , show
     , update
     , view
@@ -51,6 +51,7 @@ type Model parentMsg
         { idPrefix : String
         , visibility : GradualVisibility
         , config : Config parentMsg
+        , searchStringWasJustUpdated : Bool
         , activeSearchResultIndex : Maybe SearchResultIndex
         }
 
@@ -85,6 +86,7 @@ init idPrefix properties =
         { idPrefix = idPrefix
         , visibility = Invisible
         , config = configFromProperties properties
+        , searchStringWasJustUpdated = False
         , activeSearchResultIndex = Nothing
         }
 
@@ -95,6 +97,7 @@ innerModel :
         { idPrefix : String
         , visibility : GradualVisibility
         , config : Config parentMsg
+        , searchStringWasJustUpdated : Bool
         , activeSearchResultIndex : Maybe SearchResultIndex
         }
 innerModel model =
@@ -122,7 +125,9 @@ type Msg
     | Show
     | StartHiding
     | CompleteHiding
-    | MakeSearchResultActive SearchResultIndex
+    | SearchStringWasJustUpdated
+    | SearchStringWasNotJustUpdated
+    | MakeSearchResultActive Bool SearchResultIndex
     | MakeSearchResultInactive SearchResultIndex
     | MakePreviousOrNextSearchResultActive Int Bool
     | LoadUrl String
@@ -139,15 +144,21 @@ hide =
     StartHiding
 
 
-makeFirstSearchResultActive : Msg
-makeFirstSearchResultActive =
-    MakeSearchResultActive 0
+searchStringWasJustUpdated : Msg
+searchStringWasJustUpdated =
+    SearchStringWasJustUpdated
 
 
 update : (Model parentMsg -> parentModel) -> (Msg -> parentMsg) -> Msg -> Model parentMsg -> ( parentModel, Cmd parentMsg )
 update updateParentModel toParentMsg msg model =
     let
-        model_ : { idPrefix : String, visibility : GradualVisibility, config : Config parentMsg, activeSearchResultIndex : Maybe SearchResultIndex }
+        model_ :
+            { idPrefix : String
+            , visibility : GradualVisibility
+            , config : Config parentMsg
+            , searchStringWasJustUpdated : Bool
+            , activeSearchResultIndex : Maybe SearchResultIndex
+            }
         model_ =
             innerModel model
 
@@ -175,11 +186,30 @@ update updateParentModel toParentMsg msg model =
                         |> Maybe.withDefault Cmd.none
                     )
 
-                MakeSearchResultActive searchResultIndex ->
-                    ( { model_ | activeSearchResultIndex = Just searchResultIndex }
-                    , scrollSearchResultIntoView <| searchResultId searchResultIndex model_.idPrefix
+                SearchStringWasJustUpdated ->
+                    ( { model_
+                        | searchStringWasJustUpdated = True
+                        , activeSearchResultIndex = Just 0
+                      }
+                    , Process.sleep 200
+                        |> Task.perform (always <| SearchStringWasNotJustUpdated)
+                        |> Cmd.map toParentMsg
                     )
 
+                SearchStringWasNotJustUpdated ->
+                    ( { model_ | searchStringWasJustUpdated = False }, Cmd.none )
+
+                MakeSearchResultActive becauseOfMouseEnter searchResultIndex ->
+                    if becauseOfMouseEnter && model_.searchStringWasJustUpdated then
+                        -- Prevent a search result being made active just because the mouse pointer was already over it.
+                        -- We want to keep the first result (if any) active as the search string was just updated.
+                        ( model_, Cmd.none )
+
+                    else
+                        ( { model_ | activeSearchResultIndex = Just searchResultIndex }
+                        , scrollSearchResultIntoView <| searchResultId searchResultIndex model_.idPrefix
+                        )
+
                 MakeSearchResultInactive searchResultIndex ->
                     ( { model_
                         | activeSearchResultIndex =
@@ -263,13 +293,15 @@ loadUrl :
         { idPrefix : String
         , visibility : GradualVisibility
         , config : Config parentMsg
+        , searchStringWasJustUpdated : Bool
         , activeSearchResultIndex : Maybe SearchResultIndex
         }
     -> String
     ->
         ( { idPrefix : String
           , visibility : GradualVisibility
           , config : Config parentMsg
+          , searchStringWasJustUpdated : Bool
           , activeSearchResultIndex : Maybe SearchResultIndex
           }
         , Cmd parentMsg
@@ -374,6 +406,7 @@ view toParentMsg model searchString messageAboveSearchResults searchResults =
             { idPrefix : String
             , visibility : GradualVisibility
             , config : Config parentMsg
+            , searchStringWasJustUpdated : Bool
             , activeSearchResultIndex : Maybe SearchResultIndex
             }
         model_ =
@@ -467,13 +500,13 @@ view toParentMsg model searchString messageAboveSearchResults searchResults =
 
                                     else if event == Extras.HtmlEvents.home then
                                         Just
-                                            ( toParentMsg <| MakeSearchResultActive 0
+                                            ( toParentMsg <| MakeSearchResultActive False 0
                                             , True
                                             )
 
                                     else if event == Extras.HtmlEvents.end then
                                         Just
-                                            ( toParentMsg <| MakeSearchResultActive (List.length searchResults - 1)
+                                            ( toParentMsg <| MakeSearchResultActive False (List.length searchResults - 1)
                                             , True
                                             )
 
@@ -511,7 +544,7 @@ view toParentMsg model searchString messageAboveSearchResults searchResults =
                                                 , Accessibility.Role.option
                                                 , Accessibility.Key.tabbable False
                                                 , Html.Attributes.id <| searchResultId index model_.idPrefix
-                                                , Html.Events.onMouseEnter (toParentMsg <| MakeSearchResultActive index)
+                                                , Html.Events.onMouseEnter (toParentMsg <| MakeSearchResultActive True index)
                                                 , Html.Events.onMouseLeave (toParentMsg <| MakeSearchResultInactive index)
                                                 ]
                                                 [ Html.a

src/Pages/ListAll.elm

@@ -364,11 +364,7 @@ update msg model =
                             }
                     }
             in
-            if List.length results > 0 then
-                update (SearchDialogMsg Components.SearchDialog.makeFirstSearchResultActive) model1
-
-            else
-                ( model1, Cmd.none )
+            update (SearchDialogMsg Components.SearchDialog.searchStringWasJustUpdated) model1
 
         ChangeTheme theme ->
             let