From 92eeb3e523e4c1b1c87c4108d903029052472387 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Vannicatte?=
 <20689156+shortcuts@users.noreply.github.com>
Date: Wed, 27 Jan 2021 14:52:39 +0100
Subject: [PATCH] fix(js): ignore empty template with no query and
 `openOnFocus` (#407)

---
 .../src/__tests__/autocomplete.test.ts        | 97 ++++++++++++++++---
 packages/autocomplete-js/src/autocomplete.ts  |  5 +
 2 files changed, 88 insertions(+), 14 deletions(-)

diff --git a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
index b13f2177c..3069986c5 100644
--- a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
+++ b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
@@ -166,6 +166,7 @@ describe('autocomplete-js', () => {
     autocomplete<{ label: string }>({
       container,
       panelContainer,
+      openOnFocus: true,
       getSources() {
         return [
           {
@@ -192,12 +193,86 @@ describe('autocomplete-js', () => {
     await waitFor(() => {
       expect(
         panelContainer.querySelector<HTMLElement>('.aa-Panel')
-      ).toBeInTheDocument();
+      ).toHaveTextContent('No results template');
     });
+  });
 
-    expect(
-      panelContainer.querySelector<HTMLElement>('.aa-Panel')
-    ).toHaveTextContent('No results template');
+  test("doesn't render empty template on no query when openOnFocus is false", async () => {
+    const container = document.createElement('div');
+    const panelContainer = document.createElement('div');
+
+    document.body.appendChild(panelContainer);
+    autocomplete<{ label: string }>({
+      container,
+      panelContainer,
+      openOnFocus: false,
+      getSources() {
+        return [
+          {
+            getItems() {
+              return [];
+            },
+            templates: {
+              item({ item }) {
+                return item.label;
+              },
+              empty() {
+                return 'No results template';
+              },
+            },
+          },
+        ];
+      },
+    });
+
+    const input = container.querySelector<HTMLInputElement>('.aa-Input');
+
+    fireEvent.input(input, { target: { value: '' } });
+
+    await waitFor(() => {
+      expect(
+        panelContainer.querySelector<HTMLElement>('.aa-Panel')
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('render empty template on query when openOnFocus is false', async () => {
+    const container = document.createElement('div');
+    const panelContainer = document.createElement('div');
+
+    document.body.appendChild(panelContainer);
+    autocomplete<{ label: string }>({
+      container,
+      panelContainer,
+      openOnFocus: true,
+      getSources() {
+        return [
+          {
+            getItems() {
+              return [];
+            },
+            templates: {
+              item({ item }) {
+                return item.label;
+              },
+              empty() {
+                return 'No results template';
+              },
+            },
+          },
+        ];
+      },
+    });
+
+    const input = container.querySelector<HTMLInputElement>('.aa-Input');
+
+    fireEvent.input(input, { target: { value: 'Query' } });
+
+    await waitFor(() => {
+      expect(
+        panelContainer.querySelector<HTMLElement>('.aa-Panel')
+      ).toHaveTextContent('No results template');
+    });
   });
 
   test('calls renderEmpty without empty template on no results', async () => {
@@ -214,6 +289,7 @@ describe('autocomplete-js', () => {
     autocomplete<{ label: string }>({
       container,
       panelContainer,
+      openOnFocus: true,
       getSources() {
         return [
           {
@@ -238,7 +314,7 @@ describe('autocomplete-js', () => {
     await waitFor(() => {
       expect(
         panelContainer.querySelector<HTMLElement>('.aa-Panel')
-      ).toBeInTheDocument();
+      ).toHaveTextContent('No results render');
     });
 
     expect(renderEmpty).toHaveBeenCalledWith(
@@ -251,10 +327,6 @@ describe('autocomplete-js', () => {
       },
       expect.any(HTMLElement)
     );
-
-    expect(
-      panelContainer.querySelector<HTMLElement>('.aa-Panel')
-    ).toHaveTextContent('No results render');
   });
 
   test('renders empty template over renderEmpty method on no results', async () => {
@@ -265,6 +337,7 @@ describe('autocomplete-js', () => {
     autocomplete<{ label: string }>({
       container,
       panelContainer,
+      openOnFocus: true,
       getSources() {
         return [
           {
@@ -297,12 +370,8 @@ describe('autocomplete-js', () => {
     await waitFor(() => {
       expect(
         panelContainer.querySelector<HTMLElement>('.aa-Panel')
-      ).toBeInTheDocument();
+      ).toHaveTextContent('No results template');
     });
-
-    expect(
-      panelContainer.querySelector<HTMLElement>('.aa-Panel')
-    ).toHaveTextContent('No results template');
   });
 
   test('allows user-provided shouldPanelShow', () => {
diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
index 3bed25162..fdd248d52 100644
--- a/packages/autocomplete-js/src/autocomplete.ts
+++ b/packages/autocomplete-js/src/autocomplete.ts
@@ -52,6 +52,11 @@ export function autocomplete<TItem extends BaseItem>(
         optionsRef.current.shouldPanelShow ||
         (({ state }) => {
           const hasItems = getItemsCount(state) > 0;
+
+          if (!props.value.core.openOnFocus && !state.query) {
+            return hasItems;
+          }
+
           const hasEmptyTemplate = Boolean(
             hasEmptySourceTemplateRef.current ||
               props.value.renderer.renderEmpty