From 17ab52294223d4c75d8a8f5f95476f64b28c2603 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Tue, 28 May 2024 14:55:47 +0200
Subject: [PATCH] Tooltip: close field tooltip when ESC is pressed (#12553)

* Close field tooltip when ESC is pressed

* Use `Key.ESCAPE`
---
 src/components/views/elements/Field.tsx       | 24 +++++++++++++++++--
 test/components/views/elements/Field-test.tsx | 12 ++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index f76b945712..d60af8025d 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -14,12 +14,20 @@ 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";
 
 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;
@@ -232,6 +240,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 === 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 +338,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 ce826282ac..7cb3074927 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();
         });
     });
 });