From 1859412507bd6cd9b59b584dc81df6960304ad41 Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Mon, 4 Mar 2024 16:32:09 +0100
Subject: [PATCH] [Editor] Unselect highlight editor when pressing Escape when
 the focus is on the color picker without a dropdown menu

---
 src/display/editor/color_picker.js         | 11 +++++++-
 test/integration/highlight_editor_spec.mjs | 32 ++++++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/display/editor/color_picker.js b/src/display/editor/color_picker.js
index 535484198..2ca94dbbd 100644
--- a/src/display/editor/color_picker.js
+++ b/src/display/editor/color_picker.js
@@ -34,6 +34,8 @@ class ColorPicker {
 
   #isMainColorPicker = false;
 
+  #editor = null;
+
   #eventBus;
 
   #uiManager = null;
@@ -68,6 +70,7 @@ class ColorPicker {
     if (editor) {
       this.#isMainColorPicker = false;
       this.#type = AnnotationEditorParamsType.HIGHLIGHT_COLOR;
+      this.#editor = editor;
     } else {
       this.#isMainColorPicker = true;
       this.#type = AnnotationEditorParamsType.HIGHLIGHT_DEFAULT_COLOR;
@@ -233,7 +236,13 @@ class ColorPicker {
   }
 
   _hideDropdownFromKeyboard() {
-    if (this.#isMainColorPicker || !this.#isDropdownVisible) {
+    if (this.#isMainColorPicker) {
+      return;
+    }
+    if (!this.#isDropdownVisible) {
+      // The user pressed Escape with no dropdown visible, so we must
+      // unselect it.
+      this.#editor?.unselect();
       return;
     }
     this.hideDropdown();
diff --git a/test/integration/highlight_editor_spec.mjs b/test/integration/highlight_editor_spec.mjs
index 789be1bad..3196d4e4b 100644
--- a/test/integration/highlight_editor_spec.mjs
+++ b/test/integration/highlight_editor_spec.mjs
@@ -1366,4 +1366,36 @@ describe("Highlight Editor", () => {
       );
     });
   });
+
+  describe("Editor must be unselected when the color picker is Escaped", () => {
+    let pages;
+
+    beforeAll(async () => {
+      pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
+    });
+
+    afterAll(async () => {
+      await closePages(pages);
+    });
+
+    it("must check that the highlight editor is unselected", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await page.click("#editorHighlight");
+          await page.waitForSelector(".annotationEditorLayer.highlightEditing");
+
+          const rect = await getSpanRectFromText(page, 1, "Abstract");
+          const x = rect.x + rect.width / 2;
+          const y = rect.y + rect.height / 2;
+          await page.mouse.click(x, y, { count: 2, delay: 100 });
+
+          await page.waitForSelector(getEditorSelector(0));
+          await page.focus(`${getEditorSelector(0)} button.colorPicker`);
+
+          await page.keyboard.press("Escape");
+          await page.focus(`${getEditorSelector(0)}:not(selectedEditor)`);
+        })
+      );
+    });
+  });
 });