test: add case for no stale result leak on refocus

Removes need for inline comment.

== npm run size ==

transerSize (compressed):

* Before: JS  2209
* After:  JS  2175 (-34 B, -1.5%)

== npm test ==

```
File                  | % Stmts | % Branch | % Funcs | % Lines |
----------------------|---------|----------|---------|---------|
before                    94.33 |    81.94 |   90.47 |   95.83 |
after                 |   94.28 |    84.28 |   90.47 |   95.78 |
```

Author: Krinkle

CONTRIBUTING.md

@@ -1,9 +1,5 @@
 # Contribute to typesense-minibar
 
-## How it works
-
-* Cut the mustard using `type="module"`.
-
 ## Internal API
 
 ```js

README.md

@@ -125,7 +125,7 @@ Refer to [Style API](./API-Style.md) for the CSS variable names and selectors.
 
 | typesense-minibar | typesense-server | typesense-docsearch-scraper
 |--|--|--
-| 1.0.x | >= 0.24 | 0.6.0.rc1 <!-- adds "group_by=url_without_anchor" -->
+| 1.0.x | >= 0.24 | >= 0.6.0.rc1 <!-- adds "group_by=url_without_anchor" --> (Tested upto: 0.9.1)
 
 ### Browser support
 
@@ -166,6 +166,12 @@ Notes:
 * [Firefox 48 last to support OS X 10.6-10.8](https://www.mozilla.org/en-US/firefox/48.0/releasenotes/)
 * [Firefox 78 last to support OS X 10.9-10.11](https://www.mozilla.org/en-US/firefox/78.0/releasenotes/)
 
+## FAQ: Troubleshooting
+
+* How does this prevent JavaScript errors in older browsers? What about ES5?
+
+  If you load typesense-minibar.js standalone, make sure you have the `type="module"` attribute on the `<script>` tag. Scripts with this type are naturally ignored by older browsers. The element works fine **without JavaScript**, following the principles of [progressive enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement). This technique is analogous to "[cutting the mustard](https://responsivenews.tumblr.com/post/18948466399/cutting-the-mustard)".
+
 ## Feedback
 
 For questions, bug reports, or feature requests, use the [Issue tracker](https://github.com/jquery/typesense-minibar/issues).

demo/index.html

@@ -20,7 +20,7 @@
   </header>
   <header>
     <span class="demo-logo"></span>
-    <!-- data-group=true and right-aligned -->
+    <!-- With data-group=true and right aligned. -->
     <form role="search" class="tsmb-form demo-right-form" data-origin="https://typesense.jquery.com" data-collection="jquery_com" data-key="Zh8mMgohXECel9wjPwqT7lekLSG3OCgz" data-foot="true" data-group="true" action="https://duckduckgo.com">
       <input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">
       <input type="hidden" name="sites" value="jquery.com">

test/test.js

@@ -363,6 +363,47 @@ QUnit.module('typesense-minibar', hooks => {
     assert.false(listbox.hidden, 'listbox re-opened');
   });
 
+  QUnit.test('listbox [no stale result leak on refocus]', 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');
+    assert.equal(listbox.querySelector('mark').outerHTML, '<mark>something</mark>', 'snippet');
+
+    // When backspacing and making the input empty, we hide the listbox.
+    // Given that empty string isn't a valid query, this means no results
+    // are rendered. If we later re-focus the input field, we should not leak
+    // results from the last query (i.e. before the last backspace), as those
+    // are now unrelated.
+    mockFetchResponse = null;
+    input.value = '';
+    await expectRender(form, () => {
+      simulate(input, 'input');
+    });
+    assert.true(listbox.hidden, 'listbox hidden');
+
+    mockFetchResponse = null;
+    simulate(document.body, 'click', { bubbles: true });
+    assert.true(listbox.hidden, 'listbox remains hidden (document)');
+
+    simulate(input, 'click', { bubbles: true });
+    assert.true(listbox.hidden, 'listbox remains hidden (refocus)');
+    // It would be fine if render() was more lazy and left innerHTML populated
+    // when rendering a close() that sets `state.open = false`. It only matters
+    // that state.hits is cleared and that any future render() call will not make
+    // the element visible, unless it also replaces innerHTML then.
+    // But.. for simplicity, right now, we do clear the HTML unconditonally,
+    // so let's assert that, and detect potentially unintended changes in the future.
+    assert.equal(listbox.querySelector('mark')?.textContent, null, 'stale snippet gone');
+  });
+
   QUnit.test('listbox [arrow key cursor]', async assert => {
     const form = parseHTML('<form><input type="search"></form>');
     const input = form.firstChild;

typesense-minibar.js

@@ -42,7 +42,7 @@ globalThis.tsminibar = function tsminibar (form) {
   input.addEventListener('input', async function () {
     const query = state.query = input.value;
     if (!query) {
-      state.hits = []; // don't leak old hits on focus
+      state.hits = [];
       state.cursor = -1;
       return close();
     }
@@ -72,7 +72,7 @@ globalThis.tsminibar = function tsminibar (form) {
     }
   });
   form.addEventListener('submit', function (e) {
-    e.preventDefault(); // disable fallback
+    e.preventDefault();
   });
   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', function () {
@@ -151,9 +151,7 @@ globalThis.tsminibar = function tsminibar (form) {
   function render () {
     listbox.hidden = !state.open;
     form.classList.toggle('tsmb-form--open', state.open);
-    if (state.open) {
-      listbox.innerHTML = (state.hits.map((hit, i) => `<div role="option"${i === state.cursor ? ' aria-selected="true"' : ''}>${hit.lvl0 ? `<div class="tsmb-suggestion_group">${hit.lvl0}</div>` : ''}<a href="${hit.url}" tabindex="-1"><div class="tsmb-suggestion_title">${hit.title}</div><div class="tsmb-suggestion_content">${hit.content}</div></a></div>`).join('') || `<div class="tsmb-empty">${noResults.replace('{}', escape(state.query))}</div>`) + (form.dataset.foot ? '<a href="https://typesense.org" class="tsmb-foot" title="Search by Typesense"></a>' : '');
-    }
+    listbox.innerHTML = (state.hits.map((hit, i) => `<div role="option"${i === state.cursor ? ' aria-selected="true"' : ''}>${hit.lvl0 ? `<div class="tsmb-suggestion_group">${hit.lvl0}</div>` : ''}<a href="${hit.url}" tabindex="-1"><div class="tsmb-suggestion_title">${hit.title}</div><div class="tsmb-suggestion_content">${hit.content}</div></a></div>`).join('') || `<div class="tsmb-empty">${noResults.replace('{}', escape(state.query))}</div>`) + (form.dataset.foot ? '<a href="https://typesense.org" class="tsmb-foot" title="Search by Typesense"></a>' : '');
   }
 
   function moveCursor (offset) {