Skip to content

Commit 527670e

Browse files
shortcutsshortcuts
authored
fix(js): do not render empty sections (#594)
1 parent ca396ad commit 527670e

10 files changed

Lines changed: 169 additions & 127 deletions

File tree

‎cypress/test-apps/js/categoriesPlugin.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,7 @@ export function createCategoriesPlugin({
3636
});
3737
},
3838
templates: {
39-
header({ items }) {
40-
if (items.length === 0) {
41-
return null;
42-
}
43-
39+
header() {
4440
return (
4541
<Fragment>
4642
<span className="aa-SourceHeaderTitle">Categories</span>

‎examples/instantsearch/src/autocomplete.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -151,11 +151,7 @@ const querySuggestionsPluginInCategory = createQuerySuggestionsPlugin({
151151
},
152152
templates: {
153153
...source.templates,
154-
header({ items }) {
155-
if (items.length === 0) {
156-
return null;
157-
}
158-
154+
header() {
159155
return (
160156
<Fragment>
161157
<span className="aa-SourceHeaderTitle">In {currentCategory}</span>
@@ -232,8 +228,8 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
232228
},
233229
templates: {
234230
...source.templates,
235-
header({ items }) {
236-
if (!currentCategory || items.length === 0) {
231+
header() {
232+
if (!currentCategory) {
237233
return null;
238234
}
239235

‎examples/multiple-datasets-with-headers/app.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,7 @@ const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
2020
...source,
2121
templates: {
2222
...source.templates,
23-
header({ items }) {
24-
if (items.length === 0) {
25-
return null;
26-
}
27-
23+
header() {
2824
return (
2925
<Fragment>
3026
<span className="aa-SourceHeaderTitle">Your searches</span>
@@ -49,11 +45,7 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
4945
...source,
5046
templates: {
5147
...source.templates,
52-
header({ items, state }) {
53-
if (items.length === 0) {
54-
return null;
55-
}
56-
48+
header({ state }) {
5749
return (
5850
<Fragment>
5951
<span className="aa-SourceHeaderTitle">

‎examples/multiple-datasets-with-headers/categoriesPlugin.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,7 @@ export function createCategoriesPlugin({
3636
});
3737
},
3838
templates: {
39-
header({ items }) {
40-
if (items.length === 0) {
41-
return null;
42-
}
43-
39+
header() {
4440
return (
4541
<Fragment>
4642
<span className="aa-SourceHeaderTitle">Categories</span>

‎examples/playground/categoriesPlugin.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,7 @@ export function createCategoriesPlugin({
3636
});
3737
},
3838
templates: {
39-
header({ items }) {
40-
if (items.length === 0) {
41-
return null;
42-
}
43-
39+
header() {
4440
return (
4541
<Fragment>
4642
<span className="aa-SourceHeaderTitle">Categories</span>

‎examples/preview-panel-in-modal/app.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,7 @@ autocomplete({
8484
refresh();
8585
},
8686
templates: {
87-
header({ items, Fragment }) {
88-
if (items.length === 0) {
89-
return null;
90-
}
91-
87+
header({ Fragment }) {
9288
return (
9389
<Fragment>
9490
<span className="aa-SourceHeaderTitle">

‎examples/query-suggestions-with-recent-searches/app.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
1919
...source,
2020
templates: {
2121
...source.templates,
22-
header({ items, state }) {
23-
if (Boolean(state.query) || items.length === 0) {
22+
header({ state }) {
23+
if (state.query) {
2424
return null;
2525
}
2626

@@ -48,8 +48,8 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
4848
...source,
4949
templates: {
5050
...source.templates,
51-
header({ items, state }) {
52-
if (Boolean(state.query) || items.length === 0) {
51+
header({ state }) {
52+
if (state.query) {
5353
return null;
5454
}
5555

‎examples/recently-viewed-items/recentlyViewedItemsPlugin.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -71,11 +71,7 @@ export function createLocalStorageRecentlyViewedItems<
7171
},
7272
templates: {
7373
...transformedSource.templates,
74-
header({ items }) {
75-
if (items.length === 0) {
76-
return null;
77-
}
78-
74+
header() {
7975
return (
8076
<Fragment>
8177
<span className="aa-SourceHeaderTitle">Recently viewed</span>

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

Lines changed: 74 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import {
99
import { autocomplete } from '../autocomplete';
1010

1111
describe('render', () => {
12+
const sourceId1 = 'testSource1';
13+
const sourceId2 = 'testSource2';
14+
1215
beforeEach(() => {
1316
document.body.innerHTML = '';
1417
});
@@ -181,8 +184,6 @@ describe('render', () => {
181184
});
182185

183186
test('provides the elements', async () => {
184-
const sourceId1 = 'testSource1';
185-
const sourceId2 = 'testSource2';
186187
const container = document.createElement('div');
187188
const panelContainer = document.createElement('div');
188189

@@ -253,8 +254,6 @@ describe('render', () => {
253254
});
254255

255256
test('provides the sections', async () => {
256-
const sourceId1 = 'testSource1';
257-
const sourceId2 = 'testSource2';
258257
const container = document.createElement('div');
259258
const panelContainer = document.createElement('div');
260259

@@ -536,4 +535,75 @@ describe('render', () => {
536535
},
537536
});
538537
});
538+
539+
test('does not render the sections without results and noResults template on multi sources', async () => {
540+
const container = document.createElement('div');
541+
const panelContainer = document.createElement('div');
542+
543+
document.body.appendChild(panelContainer);
544+
autocomplete<{ label: string }>({
545+
container,
546+
panelContainer,
547+
openOnFocus: true,
548+
getSources() {
549+
return [
550+
{
551+
sourceId: sourceId1,
552+
getItems() {
553+
return [];
554+
},
555+
templates: {
556+
header() {
557+
return sourceId1;
558+
},
559+
item({ item }) {
560+
return item.label;
561+
},
562+
footer() {
563+
return sourceId1;
564+
},
565+
},
566+
},
567+
{
568+
sourceId: sourceId2,
569+
getItems() {
570+
return [{ label: '2' }];
571+
},
572+
templates: {
573+
header() {
574+
return sourceId2;
575+
},
576+
item({ item }) {
577+
return item.label;
578+
},
579+
footer() {
580+
return sourceId2;
581+
},
582+
},
583+
},
584+
];
585+
},
586+
});
587+
588+
const input = container.querySelector<HTMLInputElement>('.aa-Input');
589+
590+
fireEvent.input(input, { target: { value: 'a' } });
591+
592+
await waitFor(() => {
593+
expect(
594+
panelContainer.querySelector<HTMLElement>('.aa-Panel')
595+
).toBeInTheDocument();
596+
597+
expect(
598+
panelContainer.querySelector(
599+
`[data-autocomplete-source-id="${sourceId1}"]`
600+
)
601+
).not.toBeInTheDocument();
602+
expect(
603+
panelContainer.querySelector(
604+
`[data-autocomplete-source-id="${sourceId2}"]`
605+
)
606+
).toBeInTheDocument();
607+
});
608+
});
539609
});

0 commit comments

Comments
 (0)