From 831d1589b486dd0f5d9a5ca9c8ed8273bdfea093 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 20 Feb 2022 13:39:21 +0200
Subject: [PATCH] Dialogs: Better keyboard support (#1714)

---
 src/components/ui/ConfirmDialog.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/ConfirmDialog.tsx b/src/components/ui/ConfirmDialog.tsx
index b2f276121..872de02b4 100644
--- a/src/components/ui/ConfirmDialog.tsx
+++ b/src/components/ui/ConfirmDialog.tsx
@@ -1,7 +1,8 @@
-import React, { FC, memo } from '../../lib/teact/teact';
+import React, { FC, memo, useCallback, useRef } from '../../lib/teact/teact';
 
 import useLang from '../../hooks/useLang';
 import { TextPart } from '../common/helpers/renderMessageText';
+import useKeyboardListNavigation from '../../hooks/useKeyboardListNavigation';
 
 import Modal from './Modal';
 import Button from './Button';
@@ -37,6 +38,15 @@ const ConfirmDialog: FC<OwnProps> = ({
 }) => {
   const lang = useLang();
 
+  // eslint-disable-next-line no-null/no-null
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleSelectWithEnter = useCallback((index: number) => {
+    if (index === -1) confirmHandler();
+  }, [confirmHandler]);
+
+  const handleKeyDown = useKeyboardListNavigation(containerRef, isOpen, handleSelectWithEnter, '.Button');
+
   return (
     <Modal
       className="confirm"
@@ -45,13 +55,12 @@ const ConfirmDialog: FC<OwnProps> = ({
       isOpen={isOpen}
       onClose={onClose}
       onCloseAnimationEnd={onCloseAnimationEnd}
-      onEnter={confirmHandler}
     >
       {text && text.split('\\n').map((textPart) => (
         <p>{textPart}</p>
       ))}
       {textParts || children}
-      <div className={isButtonsInOneRow ? 'dialog-buttons mt-2' : ''}>
+      <div className={isButtonsInOneRow ? 'dialog-buttons mt-2' : ''} ref={containerRef} onKeyDown={handleKeyDown}>
         <Button
           className="confirm-dialog-button"
           isText