fix(js): do not render empty sections

algolia · May 25, 2021 · b25c140 · b25c140
1 parent 67e7bbf
commit b25c140
Show file tree

Hide file tree

Showing 2 changed files with 155 additions and 81 deletions.
diff --git a/packages/autocomplete-js/src/__tests__/render.test.ts b/packages/autocomplete-js/src/__tests__/render.test.ts
@@ -9,6 +9,9 @@ import {
 import { autocomplete } from '../autocomplete';
 
 describe('render', () => {
+  const sourceId1 = 'testSource1';
+  const sourceId2 = 'testSource2';
+
   beforeEach(() => {
     document.body.innerHTML = '';
   });
@@ -181,8 +184,6 @@ describe('render', () => {
   });
 
   test('provides the elements', async () => {
-    const sourceId1 = 'testSource1';
-    const sourceId2 = 'testSource2';
     const container = document.createElement('div');
     const panelContainer = document.createElement('div');
 
@@ -253,8 +254,6 @@ describe('render', () => {
   });
 
   test('provides the sections', async () => {
-    const sourceId1 = 'testSource1';
-    const sourceId2 = 'testSource2';
     const container = document.createElement('div');
     const panelContainer = document.createElement('div');
 
@@ -536,4 +535,75 @@ describe('render', () => {
       },
     });
   });
+
+  test('does not render the sections without results and noResults template on multi sources', async () => {
+    const container = document.createElement('div');
+    const panelContainer = document.createElement('div');
+
+    document.body.appendChild(panelContainer);
+    autocomplete<{ label: string }>({
+      container,
+      panelContainer,
+      openOnFocus: true,
+      getSources() {
+        return [
+          {
+            sourceId: sourceId1,
+            getItems() {
+              return [];
+            },
+            templates: {
+              header() {
+                return sourceId1;
+              },
+              item({ item }) {
+                return item.label;
+              },
+              footer() {
+                return sourceId1;
+              },
+            },
+          },
+          {
+            sourceId: sourceId2,
+            getItems() {
+              return [{ label: '2' }];
+            },
+            templates: {
+              header() {
+                return sourceId2;
+              },
+              item({ item }) {
+                return item.label;
+              },
+              footer() {
+                return sourceId2;
+              },
+            },
+          },
+        ];
+      },
+    });
+
+    const input = container.querySelector<HTMLInputElement>('.aa-Input');
+
+    fireEvent.input(input, { target: { value: 'a' } });
+
+    await waitFor(() => {
+      expect(
+        panelContainer.querySelector<HTMLElement>('.aa-Panel')
+      ).toBeInTheDocument();
+
+      expect(
+        panelContainer.querySelector(
+          `[data-autocomplete-source-id="${sourceId1}"]`
+        )
+      ).not.toBeInTheDocument();
+      expect(
+        panelContainer.querySelector(
+          `[data-autocomplete-source-id="${sourceId2}"]`
+        )
+      ).toBeInTheDocument();
+    });
+  });
 });
diff --git a/packages/autocomplete-js/src/render.tsx b/packages/autocomplete-js/src/render.tsx
@@ -90,87 +90,91 @@ export function renderPanel<TItem extends BaseItem>(
 
   dom.panel.classList.toggle('aa-Panel--stalled', state.status === 'stalled');
 
-  const sections = state.collections.map(({ source, items }, sourceIndex) => (
-    <section
-      key={sourceIndex}
-      className={classNames.source}
-      data-autocomplete-source-id={source.sourceId}
-    >
-      {source.templates.header && (
-        <div className={classNames.sourceHeader}>
-          {source.templates.header({
-            components,
-            createElement,
-            Fragment,
-            items,
-            source,
-            state,
-          })}
-        </div>
-      )}
+  const sections = state.collections
+    .filter(
+      ({ source, items }) => source.templates.noResults || items.length !== 0
+    )
+    .map(({ source, items }, sourceIndex) => (
+      <section
+        key={sourceIndex}
+        className={classNames.source}
+        data-autocomplete-source-id={source.sourceId}
+      >
+        {source.templates.header && (
+          <div className={classNames.sourceHeader}>
+            {source.templates.header({
+              components,
+              createElement,
+              Fragment,
+              items,
+              source,
+              state,
+            })}
+          </div>
+        )}
 
-      {source.templates.noResults && items.length === 0 ? (
-        <div className={classNames.sourceNoResults}>
-          {source.templates.noResults({
-            components,
-            createElement,
-            Fragment,
-            source,
-            state,
-          })}
-        </div>
-      ) : (
-        <ul
-          className={classNames.list}
-          {...propGetters.getListProps({
-            state,
-            props: autocomplete.getListProps({}),
-            ...autocompleteScopeApi,
-          })}
-        >
-          {items.map((item) => {
-            const itemProps = autocomplete.getItemProps({
-              item,
+        {source.templates.noResults && items.length === 0 ? (
+          <div className={classNames.sourceNoResults}>
+            {source.templates.noResults({
+              components,
+              createElement,
+              Fragment,
               source,
-            });
+              state,
+            })}
+          </div>
+        ) : (
+          <ul
+            className={classNames.list}
+            {...propGetters.getListProps({
+              state,
+              props: autocomplete.getListProps({}),
+              ...autocompleteScopeApi,
+            })}
+          >
+            {items.map((item) => {
+              const itemProps = autocomplete.getItemProps({
+                item,
+                source,
+              });
 
-            return (
-              <li
-                key={itemProps.id}
-                className={classNames.item}
-                {...propGetters.getItemProps({
-                  state,
-                  props: itemProps,
-                  ...autocompleteScopeApi,
-                })}
-              >
-                {source.templates.item({
-                  components,
-                  createElement,
-                  Fragment,
-                  item,
-                  state,
-                })}
-              </li>
-            );
-          })}
-        </ul>
-      )}
+              return (
+                <li
+                  key={itemProps.id}
+                  className={classNames.item}
+                  {...propGetters.getItemProps({
+                    state,
+                    props: itemProps,
+                    ...autocompleteScopeApi,
+                  })}
+                >
+                  {source.templates.item({
+                    components,
+                    createElement,
+                    Fragment,
+                    item,
+                    state,
+                  })}
+                </li>
+              );
+            })}
+          </ul>
+        )}
 
-      {source.templates.footer && (
-        <div className={classNames.sourceFooter}>
-          {source.templates.footer({
-            components,
-            createElement,
-            Fragment,
-            items,
-            source,
-            state,
-          })}
-        </div>
-      )}
-    </section>
-  ));
+        {source.templates.footer && (
+          <div className={classNames.sourceFooter}>
+            {source.templates.footer({
+              components,
+              createElement,
+              Fragment,
+              items,
+              source,
+              state,
+            })}
+          </div>
+        )}
+      </section>
+    ));
 
   const children = (
     <Fragment>