From 185a70224cc5827f171c2e50eafdaa50e52de0ce Mon Sep 17 00:00:00 2001
From: Daniel <danielglezalbo@gmail.com>
Date: Thu, 26 Dec 2024 14:33:38 +0100
Subject: [PATCH] FIX: Makes sure tabIndex works properly on formatPicker
 dialog

---
 webapp/src/components/formatPicker.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/formatPicker.tsx b/webapp/src/components/formatPicker.tsx
index 79cb269..42a87aa 100644
--- a/webapp/src/components/formatPicker.tsx
+++ b/webapp/src/components/formatPicker.tsx
@@ -36,7 +36,12 @@ const FormatPicker = (properties: FormatPickerProps) => {
     >
       <StyledDialogTitle>
         {t("num_fmt.title")}
-        <Cross onClick={handleClose} title={t("num_fmt.close")}>
+        <Cross
+          onClick={handleClose}
+          title={t("num_fmt.close")}
+          tabIndex={0}
+          onKeyDown={(event) => event.key === "Enter" && properties.onClose()}
+        >
           <X />
         </Cross>
       </StyledDialogTitle>
@@ -49,6 +54,10 @@ const FormatPicker = (properties: FormatPickerProps) => {
           onChange={(event) => setFormatCode(event.target.value)}
           onKeyDown={(event) => {
             event.stopPropagation();
+            if (event.key === "Enter") {
+              onSubmit(formatCode);
+              properties.onClose();
+            }
           }}
           spellCheck="false"
           onClick={(event) => event.stopPropagation()}
@@ -56,7 +65,16 @@ const FormatPicker = (properties: FormatPickerProps) => {
         />
       </StyledDialogContent>
       <DialogFooter>
-        <StyledButton onClick={() => onSubmit(formatCode)}>
+        <StyledButton
+          onClick={() => onSubmit(formatCode)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              onSubmit(formatCode);
+              properties.onClose();
+            }
+          }}
+          tabIndex={0}
+        >
           <Check
             style={{ width: "16px", height: "16px", marginRight: "8px" }}
           />