[dashboard] added focus handling to onEnter listener

gitpod-io · Jan 4, 2022 · ee68fdd · ee68fdd
1 parent 7a07ae5
commit ee68fdd
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/components/dashboard/src/components/ConfirmationModal.tsx b/components/dashboard/src/components/ConfirmationModal.tsx
@@ -43,9 +43,10 @@ export default function ConfirmationModal(props: {
             child.push(props.children);
         }
     }
+    const cancelButtonRef = useRef<HTMLButtonElement>(null);
 
     const buttons = [
-        <button className="secondary" onClick={props.onClose} autoFocus>Cancel</button>,
+        <button className="secondary" onClick={props.onClose} autoFocus ref={cancelButtonRef}>Cancel</button>,
         <button className="ml-2 danger" onClick={props.onConfirm} disabled={props.buttonDisabled}>
             {props.buttonText || "Yes, I'm Sure"}
         </button>,
@@ -63,6 +64,10 @@ export default function ConfirmationModal(props: {
             visible={props.visible === undefined ? true : props.visible}
             onClose={props.onClose}
             onEnter={() => {
+                if (cancelButtonRef?.current?.contains(document.activeElement)) {
+                    props.onClose();
+                    return false;
+                }
                 if (buttonDisabled.current) {
                     return false
                 }