Close edit dialog on escape key hit (#24)

* Close edit dialog on escape key hit * Change id to be more semantically correct
AnalogIO · Jan 25, 2024 · 9b587a4 · 9b587a4
1 parent e4ab67e
commit 9b587a4
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 23 deletions.
diff --git a/Shifty.App/Components/ProductManager.razor b/Shifty.App/Components/ProductManager.razor
@@ -8,6 +8,7 @@
 @using Components
 @inject ISnackbar Snackbar
 @inject IProductService ProductService
+@inject IJSRuntime JSRuntime
 
 <style>
     .mud-table-cell {
@@ -63,7 +64,7 @@
                     }
                 </CellTemplate>
                 <EditTemplate>
-                    <MudSwitch Label="Visible" Color="Color.Primary" @bind-Checked="context.Item.Visible" />
+                    <MudSwitch id="first-edit-element" Label="Visible" Color="Color.Primary" @bind-Checked="context.Item.Visible" />
                 </EditTemplate>
             </PropertyColumn>
             <PropertyColumn Property="x => x.Id" Title="Id" IsEditable="false" />
@@ -123,6 +124,7 @@
         {
             UserGroupDict.Add(group, item.AllowedUserGroups.Contains(group));
         }
+        FocusFirst();
     }
 
     private bool _loading = true;
@@ -146,6 +148,11 @@
         Snackbar.Add("Cancelled product changes", Severity.Info);
     }
 
+    async Task FocusFirst()
+    {
+        await JSRuntime.InvokeVoidAsync("window.focusElement", "first-edit-element");
+    }
+
     async Task CommittedItemChanges(ProductResponse item)
     {
         List<UserGroup> AllowedUserGroups =

diff --git a/Shifty.App/Shared/MainLayout.razor b/Shifty.App/Shared/MainLayout.razor
@@ -3,7 +3,9 @@
 @inherits LayoutComponentBase
 
 <MudThemeProvider Theme="_theme"/>
-<MudDialogProvider />
+<MudDialogProvider
+    CloseOnEscapeKey="true"
+/>
 <MudSnackbarProvider />
 
 <MudLayout>

diff --git a/Shifty.App/wwwroot/index.html b/Shifty.App/wwwroot/index.html
@@ -1,32 +1,54 @@
 <!DOCTYPE html>
 <html>
-
-<head>
+  <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
     <title>Shifty</title>
     <base href="/" />
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+      rel="stylesheet"
+    />
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
     <link href="manifest.json" rel="manifest" />
     <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
-</head>
+  </head>
 
-<body>
-<div id="app" style="background: #e9e9e9; display: flex; justify-content: center">
-    <div style="padding: 20vh">
-        <img src="./coffee_loading.png" alt="Loading animation" style="height: 60vh">
+  <body>
+    <div
+      id="app"
+      style="background: #e9e9e9; display: flex; justify-content: center"
+    >
+      <div style="padding: 20vh">
+        <img
+          src="./coffee_loading.png"
+          alt="Loading animation"
+          style="height: 60vh"
+        />
+      </div>
     </div>
-</div>
-
-<div id="blazor-error-ui">
-    An unhandled error has occurred.
-    <a href="" class="reload">Reload</a>
-    <a class="dismiss">🗙</a>
-</div>
-<script src="_framework/blazor.webassembly.js"></script>
-<script>navigator.serviceWorker.register('service-worker.js');</script>
-<script src="_content/MudBlazor/MudBlazor.min.js"></script>
-</body>
 
-</html>
+    <div id="blazor-error-ui">
+      An unhandled error has occurred.
+      <a href="" class="reload">Reload</a>
+      <a class="dismiss">🗙</a>
+    </div>
+    <script>
+      const focusElement = (id) => {
+        setTimeout(() => {
+          const element = document.getElementById(id);
+          element.focus();
+        }, 50); // Race conditions 💀💀💀
+      };
+      window.focusElement = focusElement;
+    </script>
+    <script src="_framework/blazor.webassembly.js"></script>
+    <script>
+      navigator.serviceWorker.register("service-worker.js");
+    </script>
+    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
+  </body>
+</html>