Support clearing the filter input by pressing Escape

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

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",

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}

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();
+  });
+});