From 360aaacd1220b50144e423ba62e5755c81f84cf7 Mon Sep 17 00:00:00 2001
From: Florian Duros <florian.duros@ormaz.fr>
Date: Thu, 23 May 2024 17:58:35 +0200
Subject: [PATCH 1/2] Close field tooltip when ESC is pressed

---
 src/components/views/elements/Field.tsx       | 23 +++++++++++++++++--
 test/components/views/elements/Field-test.tsx | 12 ++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index f76b945712b..5f6d53fbd7d 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -14,7 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, RefObject, createRef } from "react";
+import React, {
+    InputHTMLAttributes,
+    SelectHTMLAttributes,
+    TextareaHTMLAttributes,
+    RefObject,
+    createRef,
+    KeyboardEvent,
+} from "react";
 import classNames from "classnames";
 import { debounce } from "lodash";
 
@@ -232,6 +239,18 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         return this.props.inputRef ?? this._inputRef;
     }
 
+    private onKeyDown = (evt: KeyboardEvent<HTMLDivElement>): void => {
+        // If the tooltip is displayed to show a feedback and Escape is pressed
+        // The tooltip is hided
+        if (this.state.feedbackVisible && evt.key === "Escape") {
+            evt.preventDefault();
+            evt.stopPropagation();
+            this.setState({
+                feedbackVisible: false,
+            });
+        }
+    };
+
     public render(): React.ReactNode {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
         const {
@@ -318,7 +337,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         });
 
         return (
-            <div className={fieldClasses}>
+            <div className={fieldClasses} onKeyDown={this.onKeyDown}>
                 {prefixContainer}
                 {fieldInput}
                 <label htmlFor={this.id}>{this.props.label}</label>
diff --git a/test/components/views/elements/Field-test.tsx b/test/components/views/elements/Field-test.tsx
index ce826282aca..7cb3074927a 100644
--- a/test/components/views/elements/Field-test.tsx
+++ b/test/components/views/elements/Field-test.tsx
@@ -69,6 +69,10 @@ describe("Field", () => {
 
             // Expect 'alert' role
             expect(screen.queryByRole("alert")).toBeInTheDocument();
+
+            // Close the feedback is Escape is pressed
+            fireEvent.keyDown(screen.getByRole("textbox"), { key: "Escape" });
+            expect(screen.queryByRole("alert")).toBeNull();
         });
 
         it("Should mark the feedback as status if valid", async () => {
@@ -87,6 +91,10 @@ describe("Field", () => {
 
             // Expect 'status' role
             expect(screen.queryByRole("status")).toBeInTheDocument();
+
+            // Close the feedback is Escape is pressed
+            fireEvent.keyDown(screen.getByRole("textbox"), { key: "Escape" });
+            expect(screen.queryByRole("status")).toBeNull();
         });
 
         it("Should mark the feedback as tooltip if custom tooltip set", async () => {
@@ -106,6 +114,10 @@ describe("Field", () => {
 
             // Expect 'tooltip' role
             expect(screen.queryByRole("tooltip")).toBeInTheDocument();
+
+            // Close the feedback is Escape is pressed
+            fireEvent.keyDown(screen.getByRole("textbox"), { key: "Escape" });
+            expect(screen.queryByRole("tooltip")).toBeNull();
         });
     });
 });

From 96ca1c4e25336228993ca479ebb258eb12b86824 Mon Sep 17 00:00:00 2001
From: Florian Duros <florian.duros@ormaz.fr>
Date: Tue, 28 May 2024 14:32:38 +0200
Subject: [PATCH 2/2] Use `Key.ESCAPE`

---
 src/components/views/elements/Field.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index 5f6d53fbd7d..d60af8025d9 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -27,6 +27,7 @@ import { debounce } from "lodash";
 
 import { IFieldState, IValidationResult } from "./Validation";
 import Tooltip from "./Tooltip";
+import { Key } from "../../../Keyboard";
 
 // Invoke validation from user input (when typing, etc.) at most once every N ms.
 const VALIDATION_THROTTLE_MS = 200;
@@ -242,7 +243,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
     private onKeyDown = (evt: KeyboardEvent<HTMLDivElement>): void => {
         // If the tooltip is displayed to show a feedback and Escape is pressed
         // The tooltip is hided
-        if (this.state.feedbackVisible && evt.key === "Escape") {
+        if (this.state.feedbackVisible && evt.key === Key.ESCAPE) {
             evt.preventDefault();
             evt.stopPropagation();
             this.setState({