Fix display of previous result on re-focus after close/clear button

While at it, remove the redundant `state.cursor = -1;` that `close()`
already takes care of.

== npm run size ==

JS transfer size:
* Before 2224
* After  2221 (-3B)

Author: Krinkle

test/test.js

@@ -363,7 +363,7 @@ QUnit.module('typesense-minibar', hooks => {
     assert.false(listbox.hidden, 'listbox re-opened');
   });
 
-  QUnit.test('listbox [no stale result leak on refocus]', async assert => {
+  QUnit.test('listbox [no stale result leak after empty input]', async assert => {
     const form = parseHTML('<form><input type="search"></form>');
     const input = form.firstChild;
     bar = tsminibar(form);
@@ -404,6 +404,42 @@ QUnit.module('typesense-minibar', hooks => {
     assert.equal(listbox.querySelector('mark')?.textContent, null, 'stale snippet gone');
   });
 
+  QUnit.test('listbox [no stale result leak after 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');
+    assert.equal(listbox.querySelector('mark').outerHTML, '<mark>something</mark>', 'snippet');
+
+    // NOTE: close button empties programmatically without "input" event.
+    // This means clean up of "input" event handler isn't reached.
+    // The close button is responsible for clearing state.hits instead.
+    mockFetchResponse = null;
+    simulate(form.querySelector('svg.tsmb-icon-close'), 'click', { bubbles: true });
+    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

@@ -41,7 +41,6 @@ globalThis.tsminibar = function tsminibar (form, dataset = form.dataset) {
     const query = state.query = input.value;
     if (!query) {
       state.hits = [];
-      state.cursor = -1;
       return close();
     }
     const hits = await search(query);
@@ -75,8 +74,9 @@ globalThis.tsminibar = function tsminibar (form, dataset = form.dataset) {
   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 () {
     input.value = '';
-    input.focus();
+    state.hits = [];
     close();
+    input.focus();
   });
   connect();