From d12b05abcbc7501f673a428f543b93ee693f47f3 Mon Sep 17 00:00:00 2001
From: George Gevoian <george@gevoian.com>
Date: Mon, 1 Aug 2022 00:03:59 -0700
Subject: [PATCH] (core) Keep focus when canceling choice rename

Summary:
Small bug fix that ensures focus isn't lost when Escape is pressed
while renaming a choice. This now makes it possible to close the
editor with a subsequent press of Escape.

Test Plan: Browser test.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3556
---
 app/client/widgets/ChoiceListEntry.ts | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/client/widgets/ChoiceListEntry.ts b/app/client/widgets/ChoiceListEntry.ts
index c3296a18..8534196d 100644
--- a/app/client/widgets/ChoiceListEntry.ts
+++ b/app/client/widgets/ChoiceListEntry.ts
@@ -293,7 +293,7 @@ export class ChoiceListEntry extends Disposable {
       focus(tokenField.getTextInput());
     };
 
-    return cssColorAndLabel(
+    const tokenColorAndLabel: HTMLDivElement = cssColorAndLabel(
       dom.autoDispose(fillColorObs),
       dom.autoDispose(textColorObs),
       dom.autoDispose(choiceText),
@@ -335,9 +335,13 @@ export class ChoiceListEntry extends Disposable {
           dom.on('copy', stopPropagation),
           dom.on('cut', stopPropagation),
           dom.on('paste', stopPropagation),
-          // On enter, focus on the input element.
           dom.onKeyDown({
-            Enter : focusOnNew
+            // On enter, focus on the input element.
+            Enter : focusOnNew,
+            // On escape, focus on the token (i.e. the parent node of this element). That way
+            // the browser will scroll the view if needed, and a subsequent escape will close
+            // the editor.
+            Escape: () => tokenColorAndLabel.parentElement?.focus(),
           }),
           // Don't bubble up click, as it would change focus.
           dom.on('click', stopPropagation),
@@ -346,6 +350,11 @@ export class ChoiceListEntry extends Disposable {
         args: [dom.cls(cssEditableLabel.className)],
       }),
     );
+
+    return [
+      tokenColorAndLabel,
+      dom.onKeyDown({Escape$: () => this._cancel()}),
+    ];
   }
 }
 
@@ -464,6 +473,9 @@ const cssToken = styled(cssListRow, `
   .${cssTokenField.className}.token-dragactive & {
     cursor: unset;
   }
+  &:focus {
+    outline: none;
+  }
 `);
 
 const cssTokenColorInactive = styled('div', `