Clear search input when clicking "X" icon

Keep the same "close only" behaviour when pressing the Esc key
and when clicking outside the listbox. But, when pressing the "X"
icon within the search field, I think it better meets expectations
if this also clears the input field.

Comparison:
* DocSearch.js v2 ([email protected]) does not do this.
* DocSearch.js v3 ([email protected]) does do this.

== npm run size ==

* Before: JS  2196
* After:  JS  2209 (+13 B, +0.5%)

Author: Krinkle

README.md

@@ -3,7 +3,7 @@
 <div align="center">
 
 [![Continuous integration](https://github.com/jquery/typesense-minibar/actions/workflows/CI.yaml/badge.svg)](https://github.com/jquery/typesense-minibar/actions/workflows/CI.yaml?query=event%3Apush+branch%3Amain)
-[![Test coverage](https://img.shields.io/badge/coverage-92%25-brightgreen.svg)](https://jquery.github.io/typesense-minibar/coverage/)
+[![Test coverage](https://img.shields.io/badge/coverage-93%25-brightgreen.svg)](https://jquery.github.io/typesense-minibar/coverage/)
 [![Tested with QUnit](https://img.shields.io/badge/tested_with-qunit-9c3493.svg)](https://qunitjs.com/)
 
 </div>

test/test.js

@@ -302,7 +302,27 @@ QUnit.module('typesense-minibar', hooks => {
     assert.true(listbox.hidden, 'listbox hidden');
   });
 
-  QUnit.test('listbox [close on click]', async assert => {
+  QUnit.test('listbox [close button]', async assert => {
+    const form = parseHTML('<form><input type="search"></form>');
+    const input = form.firstChild;
+    bar = tsminibar(form);
+    const listbox = form.querySelector('[role=listbox]');
+
+    mockFetchResponse = API_RESP_FULL_MATCH_SOMETHING;
+    input.value = 'something';
+    await expectRender(form, () => {
+      simulate(input, 'input');
+    });
+    assert.false(listbox.hidden, 'listbox not hidden');
+
+    mockFetchResponse = null;
+    simulate(form.querySelector('svg.tsmb-icon-close'), 'click', { bubbles: true });
+
+    assert.true(listbox.hidden, 'listbox hidden');
+    assert.equal(input.value, '', 'clear input value');
+  });
+
+  QUnit.test('listbox [close on outside click]', async assert => {
     const form = parseHTML('<form><input type="search"></form>');
     const input = form.firstChild;
     bar = tsminibar(form);

typesense-minibar.js

@@ -75,7 +75,11 @@ globalThis.tsminibar = function tsminibar (form) {
     e.preventDefault(); // disable fallback
   });
   form.insertAdjacentHTML('beforeend', '<svg viewBox="0 0 12 12" width="20" height="20" aria-hidden="true" class="tsmb-icon-close" style="display: none;"><path d="M9 3L3 9M3 3L9 9"/></svg>');
-  form.querySelector('.tsmb-icon-close').addEventListener('click', close);
+  form.querySelector('.tsmb-icon-close').addEventListener('click', function () {
+    input.value = '';
+    input.focus();
+    close();
+  });
   connect();
 
   function close () {