chore

FNZCM/FNZCM.BlazorWasm/UI/Views/Browse/BrowseView.razor

@@ -1,6 +1,10 @@
 @inherits ViewBase
 
-<LibSelector CurrentLibrary="@CurrentLibrary" OnValueChanged="SelectedLibraryChanged"></LibSelector>
+<div class="row mt-2">
+    <div class="col">
+        <LibSelector CurrentLibrary="@CurrentLibrary" OnValueChanged="SelectedLibraryChanged"></LibSelector>
+    </div>
+</div>
 
 <div class="row mt-2">
     <div class="row">

FNZCM/FNZCM.BlazorWasm/UI/Views/Browse/LibSelector.razor

@@ -4,49 +4,44 @@
     [Parameter] public EventCallback<FeLibrary> OnValueChanged { get; set; }
 }
 
-<div class="row mt-2">
+<div class="row collapse show" id="LibSelectorListCollapsed">
     <div class="col">
+        <div class="d-flex flex-row align-items-center">
+            <span>Library (@FnzDataSet.AllLibrary.Length):&nbsp;</span>
+            <button class="btn btn-primary p-1" type="button" @onclick="ShowLibraryList">@($"{CurrentLibrary?.Name} ({CurrentLibrary?.Discs.Length})")</button>
+        </div>
+    </div>
+</div>
 
-        <div class="row">
-            <div class="col collapse show" id="LibSelectorListCollapsed">
-                <div class="d-flex flex-row align-items-center">
-                    <span>Library (@FnzDataSet.AllLibrary.Length):&nbsp;</span>
-                    <button class="btn btn-primary p-1" type="button" @onclick="ShowLibraryList">@($"{CurrentLibrary?.Name} ({CurrentLibrary?.Discs.Length})")</button>
-                </div>
-            </div>
-
-            <div class="row collapse" id="LibSelectorList">
-                <div class="col">
-                    <fieldset class="border rounded-3 p-2">
-                        <legend class="float-none w-auto px-2 d-flex flex-row align-items-center">
-                            <span>Library (@FnzDataSet.AllLibrary.Length):&nbsp;</span>
-                            <button class="btn btn-primary p-1" type="button" @onclick="HideLibraryList">@($"{CurrentLibrary?.Name} ({CurrentLibrary?.Discs.Length})")</button>
-                        </legend>
-                        <div class="mt-0">
-                            <div class="d-flex">
-                                <div class="">
-                                    Filter:&nbsp;
-                                </div>
-                                <div class="col flex-fill">
-                                    <InputText @ref="SearchInput" class="w-100" Value="@SearchValue" ValueExpression="@(()=>SearchValue)" @oninput="SearchChanged" @onkeydown="SearchKeydown"></InputText>
-                                </div>
-                            </div>
-                        </div>
-                        @foreach (var lib in (ListDataSource).KeepNoEmpty())
-                        {
-                            if (lib == null)
-                            {
-                                <button class="btn btn-secondary p-1 m-1" type="button" disabled>No result</button>
-                            }
-                            else
-                            {
-                                <button class="btn btn-secondary p-1 m-1" type="button" @onclick="()=>SelectLib(lib)">@($"{lib?.Name} ({lib?.Discs.Length})")</button>
-                            }
-                        }
-                    </fieldset>
+<div class="row collapse" id="LibSelectorList">
+    <div class="col">
+        <fieldset class="border rounded-3 p-2">
+            <legend class="float-none w-auto px-2 d-flex flex-row align-items-center">
+                <span>Library (@FnzDataSet.AllLibrary.Length):&nbsp;</span>
+                <button class="btn btn-primary p-1" type="button" @onclick="HideLibraryList">@($"{CurrentLibrary?.Name} ({CurrentLibrary?.Discs.Length})")</button>
+            </legend>
+            <div class="mt-0">
+                <div class="d-flex">
+                    <div class="">
+                        Filter:&nbsp;
+                    </div>
+                    <div class="col flex-fill">
+                        <InputText id="LibSelectorInput" class="w-100" Value="@SearchValue" ValueExpression="@(()=>SearchValue)" @oninput="SearchChanged" @onkeydown="SearchKeydown"></InputText>
+                    </div>
                 </div>
             </div>
-        </div>
+            @foreach (var lib in (ListDataSource).KeepNoEmpty())
+            {
+                if (lib == null)
+                {
+                    <button class="btn btn-secondary p-1 m-1" type="button" disabled>No result</button>
+                }
+                else
+                {
+                    <button class="btn btn-secondary p-1 m-1" type="button" @onclick="()=>SelectLib(lib)">@($"{lib?.Name} ({lib?.Discs.Length})")</button>
+                }
+            }
+        </fieldset>
     </div>
 </div>
 
@@ -57,14 +52,12 @@
     private ValueTask ToggleLibraryList() => js.InvokeVoidAsync("ShowLibSelectorList");
 
 
-    private InputText SearchInput { get; set; }
     private string SearchValue { get; set; }
     private FeLibrary[] ListDataSource => FnzDataSet.AllLibrary?.OrderBy(p => p.Key).Where(p => string.IsNullOrEmpty(SearchValue) || p.Name.Contains(SearchValue, StringComparison.OrdinalIgnoreCase)).ToArray();
 
     private async Task ShowLibraryList()
     {
         await ExpandLibraryList();
-        await SearchInput.Element.Value.FocusAsync();
     }
 
     private async Task HideLibraryList()

FNZCM/FNZCM.BlazorWasm/wwwroot/fnz.js

@@ -14,12 +14,16 @@ function ShowLibSelectorList(s) {
         var e0 = document.querySelector("#LibSelectorListCollapsed");
         var e1 = document.querySelector("#LibSelectorList");
 
-        var c0 = new bootstrap.Collapse(e0, { toggle: true });
+        var c0 = new bootstrap.Collapse(e0, { toggle: false });
         var c1 = new bootstrap.Collapse(e1, { toggle: false });
 
         e0.addEventListener('hidden.bs.collapse', function () { c1.show() });
         e1.addEventListener('hidden.bs.collapse', function () { c0.show() });
 
+        e1.addEventListener('shown.bs.collapse', function () {
+            document.getElementById("LibSelectorInput").focus();
+        });
+
         CollapseLibSelectorList = [c0, c1];
     }