Focus confirm button instead of cancel in modals (#2340)

focus confirm button instead of cancel in modals
oxidecomputer · Jul 25, 2024 · 6615cb6 · 6615cb6
1 parent e48b009
commit 6615cb6
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/app/ui/lib/Modal.tsx b/app/ui/lib/Modal.tsx
@@ -135,10 +135,9 @@ Modal.Footer = ({
 }) => (
   <footer className="flex items-center justify-between border-t px-3 py-3 border-secondary">
     <div className="mr-4">{children}</div>
-    <div className="space-x-2">
-      <Button variant="secondary" size="sm" onClick={onDismiss}>
-        {cancelText || 'Cancel'}
-      </Button>
+    <div className="flex flex-row-reverse gap-2">
+      {/* Note the confirm button is first so it autofocuses when the modal opens,
+          but it displays in the right order because of flex-row-reverse */}
       <Button
         size="sm"
         variant={actionType}
@@ -148,6 +147,9 @@ Modal.Footer = ({
       >
         {actionText}
       </Button>
+      <Button variant="secondary" size="sm" onClick={onDismiss}>
+        {cancelText || 'Cancel'}
+      </Button>
     </div>
   </footer>
 )