From 60b88b1963901580b533ab6650cfda3665db7da8 Mon Sep 17 00:00:00 2001
From: Max Smolens <msmolens@gmail.com>
Date: Sat, 2 Oct 2021 18:12:09 -0400
Subject: [PATCH] Support clearing the filter input by pressing Escape

---
 CHANGELOG.md                            |  6 ++++-
 src/manifest.json                       |  2 +-
 src/treetop/FilterInput.svelte          | 10 +++++++++
 test/treetop/FilterInput.svelte.test.ts | 30 +++++++++++++++++++++++++
 4 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7b73513..7a518ae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,8 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
+
+## [1.3.0] - 2021-10-02
 ### Added
 - Add webextension-polyfill.
+- Pressing Escape clears the search input.
 
 ## [1.2.0] - 2021-09-18
 ### Added
@@ -42,7 +45,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Added
 - Initial release.
 
-[Unreleased]: https://github.com/msmolens/treetop/compare/v1.2.0...HEAD
+[Unreleased]: https://github.com/msmolens/treetop/compare/v1.3.0...HEAD
+[1.3.0]: https://github.com/msmolens/treetop/releases/tag/v1.3.0
 [1.2.0]: https://github.com/msmolens/treetop/releases/tag/v1.2.0
 [1.1.3]: https://github.com/msmolens/treetop/releases/tag/v1.1.3
 [1.1.2]: https://github.com/msmolens/treetop/releases/tag/v1.1.2
diff --git a/src/manifest.json b/src/manifest.json
index 37cc257..03ae244 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Treetop",
   "description": "__MSG_extensionDescription__",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "author": "Max Smolens",
   "homepage_url": "https://github.com/msmolens/treetop",
   "default_locale": "en",
diff --git a/src/treetop/FilterInput.svelte b/src/treetop/FilterInput.svelte
index a22377f..cceca9e 100644
--- a/src/treetop/FilterInput.svelte
+++ b/src/treetop/FilterInput.svelte
@@ -69,6 +69,15 @@
     dispatchInputEvent();
   }
 
+  /**
+   * Clear filter input when user presses Escape.
+   */
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      clearFilterInput();
+    }
+  }
+
   /**
    * Debounced filter input handler.
    */
@@ -88,6 +97,7 @@
     <TextField
       bind:value={filter}
       on:input={debounceFilterInput}
+      on:keydown={onKeyDown}
       label={browser.i18n.getMessage('search')}>
       <IconButton
         bind:this={iconButton}
diff --git a/test/treetop/FilterInput.svelte.test.ts b/test/treetop/FilterInput.svelte.test.ts
index 5073e4b..bd41252 100644
--- a/test/treetop/FilterInput.svelte.test.ts
+++ b/test/treetop/FilterInput.svelte.test.ts
@@ -127,3 +127,33 @@ it('clears the input when the clear button is pressed', async () => {
     expect(screen.queryByRole('button')).not.toBeInTheDocument();
   });
 });
+
+it('clears the input when the escape is pressed', async () => {
+  const { component } = setup();
+
+  const callback = jest.fn();
+  component.$on('input', callback);
+
+  const input = screen.getByLabelText(/^search$/i);
+
+  const words = faker.random.words();
+  // eslint-disable-next-line @typescript-eslint/await-thenable
+  await userEvent.type(input, words);
+  userEvent.keyboard('[Enter]');
+
+  await waitFor(() => {
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  expect(callback).toHaveBeenCalledTimes(1);
+
+  userEvent.keyboard('{Escape}');
+
+  await waitFor(() => {
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+
+  await waitFor(() => {
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+});