Autofocus buttons

mountain-loop · Apr 11, 2023 · 66813d6 · 66813d6
1 parent a38691e
commit 66813d6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 20 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -8,9 +8,9 @@ module.exports = {
     "plugin:@typescript-eslint/recommended",
     "eslint-config-prettier"
   ],
-  parser: '@typescript-eslint/parser',
+  parser: "@typescript-eslint/parser",
   parserOptions: {
-    project: ['./tsconfig.json'],
+    project: ["./tsconfig.json"]
   },
   ignorePatterns: ["src-tauri/**/*"],
   settings: {
@@ -25,13 +25,13 @@ module.exports = {
     }
   },
   rules: {
-    "jsx-a11y/no-autofocus": "warn",
+    "jsx-a11y/no-autofocus": "off",
     "react/react-in-jsx-scope": "off",
     "import/no-unresolved": "off",
     "@typescript-eslint/consistent-type-imports": ["error", {
       prefer: "type-imports",
       disallowTypeAnnotations: true,
       fixStyle: "separate-type-imports"
-    }],
+    }]
   }
 };
diff --git a/src-web/components/WorkspaceActionsDropdown.tsx b/src-web/components/WorkspaceActionsDropdown.tsx
@@ -51,25 +51,26 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceDropdown({ classN
                 <Button
                   className="focus"
                   color="gray"
-                  rightSlot={<Icon icon="openNewWindow" />}
-                  onClick={async () => {
+                  onClick={() => {
                     hide();
-                    await invoke('new_window', {
-                      url: routes.paths.workspace({ workspaceId: w.id }),
-                    });
+                    routes.navigate('workspace', { workspaceId: w.id });
                   }}
                 >
-                  New Window
+                  This Window
                 </Button>
                 <Button
+                  autoFocus
                   className="focus"
                   color="gray"
-                  onClick={() => {
+                  rightSlot={<Icon icon="openNewWindow" />}
+                  onClick={async () => {
                     hide();
-                    routes.navigate('workspace', { workspaceId: w.id });
+                    await invoke('new_window', {
+                      url: routes.paths.workspace({ workspaceId: w.id }),
+                    });
                   }}
                 >
-                  This Window
+                  New Window
                 </Button>
               </HStack>
             );

diff --git a/src-web/hooks/Confirm.tsx b/src-web/hooks/Confirm.tsx
@@ -19,12 +19,6 @@ const confirmButtonTexts: Record<NonNullable<ConfirmProps['variant']>, string> =
 };
 
 export function Confirm({ onHide, onResult, variant = 'confirm' }: ConfirmProps) {
-  const focusRef = (el: HTMLButtonElement | null) => {
-    setTimeout(() => {
-      el?.focus();
-    });
-  };
-
   const handleHide = () => {
     onResult(false);
     onHide();
@@ -40,7 +34,7 @@ export function Confirm({ onHide, onResult, variant = 'confirm' }: ConfirmProps)
       <Button className="focus" color="gray" onClick={handleHide}>
         Cancel
       </Button>
-      <Button className="focus" ref={focusRef} color={colors[variant]} onClick={handleSuccess}>
+      <Button autoFocus className="focus" color={colors[variant]} onClick={handleSuccess}>
         {confirmButtonTexts[variant]}
       </Button>
     </HStack>