Added highlight update on mouseover for multiselect

microsoft · Mar 7, 2024 · 6b825bb · 6b825bb
1 parent 6103dc6
commit 6b825bb
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 6 deletions.
diff --git a/src/EventLogExpert/Shared/Components/ValueSelect.razor b/src/EventLogExpert/Shared/Components/ValueSelect.razor
@@ -1,7 +1,7 @@
 @typeparam T
 @inherits Base.BaseComponent<T>
 
-<div class="dropdown-input" @onkeydown="HandleKeyDown" @ref="_selectComponent">
+<div class="dropdown-input" @onkeydown="HandleKeyDown" @onkeydown:preventDefault="_preventDefault" @ref="_selectComponent">
     <input class="@CssClass" @oninput="OnInputChange" readonly="@(!IsInput || IsMultiSelect)" tabindex="0" type="text" value="@DisplayString" />
 
     <div class="dropdown-list" tabindex="-1">

diff --git a/src/EventLogExpert/Shared/Components/ValueSelect.razor.cs b/src/EventLogExpert/Shared/Components/ValueSelect.razor.cs
@@ -13,12 +13,22 @@ public sealed partial class ValueSelect<T> : BaseComponent<T>
     private readonly List<ValueSelectItem<T>> _items = [];
     private readonly HashSet<T> _selectedValues = [];
 
+    private ValueSelectItem<T>? _highlightedItem;
+    private bool _preventDefault;
     private ElementReference _selectComponent;
 
     [Parameter]
     public RenderFragment ChildContent { get; set; } = null!;
 
-    public ValueSelectItem<T>? HighlightedItem { get; private set; } = null;
+    public ValueSelectItem<T>? HighlightedItem
+    {
+        get => _highlightedItem;
+        set
+        {
+            _highlightedItem = value;
+            StateHasChanged();
+        }
+    }
 
     [Parameter]
     public bool IsInput { get; set; }
@@ -131,11 +141,15 @@ private async void HandleKeyDown(KeyboardEventArgs args)
 
                 return;
             case "ArrowUp":
+                _preventDefault = true;
+
                 await OpenDropDown();
                 await SelectAdjacentItem(-1);
 
                 return;
             case "ArrowDown":
+                _preventDefault = true;
+
                 await OpenDropDown();
                 await SelectAdjacentItem(+1);
 
@@ -161,6 +175,8 @@ private async void HandleKeyDown(KeyboardEventArgs args)
 
                 return;
         }
+
+        _preventDefault = false;
     }
 
     private async void OnInputChange(ChangeEventArgs args)

diff --git a/src/EventLogExpert/Shared/Components/ValueSelectItem.razor b/src/EventLogExpert/Shared/Components/ValueSelectItem.razor
@@ -1,6 +1,7 @@
 @typeparam T
 
-<div class="@CssClass" highlighted="@(_parent.HighlightedItem?.Equals(this) ?? false)" @onmousedown="SelectItem" selected="@_isSelected">
+<div class="@CssClass" highlighted="@(_parent.HighlightedItem?.Equals(this) ?? false)" @onmousedown="SelectItem"
+    @onmouseenter="HighlightItem" selected="@_isSelected">
     @if (ChildContent is not null)
     {
         @ChildContent

diff --git a/src/EventLogExpert/Shared/Components/ValueSelectItem.razor.cs b/src/EventLogExpert/Shared/Components/ValueSelectItem.razor.cs
@@ -48,6 +48,13 @@ private ValueSelect<T> ValueSelect
 
     public void Dispose() => ValueSelect.RemoveItem(this);
 
+    private void HighlightItem()
+    {
+        if (!_parent.IsMultiSelect) { return; }
+
+        _parent.HighlightedItem = this;
+    }
+
     private async void SelectItem()
     {
         if (IsDisabled) { return; }

diff --git a/src/EventLogExpert/wwwroot/css/app.css b/src/EventLogExpert/wwwroot/css/app.css
@@ -298,10 +298,10 @@ i.bi.bi-star-fill { color: var(--clr-yellow); }
 
         color: #fff;
 
-        &:hover { background-color: var(--background-darkgray); }
+        &:hover,
+        &[highlighted] { background-color: var(--background-darkgray); }
 
-        &[selected],
-        &[highlighted] {
+        &[selected] {
             color: var(--background-darkgray);
             background-color: var(--clr-lightblue);
         }