fix(js): ignore empty template with no query and openOnFocus

packages/autocomplete-js/src/__tests__/autocomplete.test.ts

@@ -166,6 +166,7 @@ describe('autocomplete-js', () => {
     autocomplete<{ label: string }>({
       container,
       panelContainer,
+      openOnFocus: true,
       getSources() {
         return [
           {
@@ -200,6 +201,92 @@ describe('autocomplete-js', () => {
     ).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();
+    });
+
+    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')
+      ).toBeInTheDocument();
+    });
+
+    expect(
+      panelContainer.querySelector<HTMLElement>('.aa-Panel')
+    ).toHaveTextContent('No results template');
+  });
+
   test('calls renderEmpty without empty template on no results', async () => {
     const container = document.createElement('div');
     const panelContainer = document.createElement('div');
@@ -214,6 +301,7 @@ describe('autocomplete-js', () => {
     autocomplete<{ label: string }>({
       container,
       panelContainer,
+      openOnFocus: true,
       getSources() {
         return [
           {
@@ -265,6 +353,7 @@ describe('autocomplete-js', () => {
     autocomplete<{ label: string }>({
       container,
       panelContainer,
+      openOnFocus: true,
       getSources() {
         return [
           {

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