Skip to content

fix(js): do not render empty sections #594

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shortcuts merged 3 commits into from
May 25, 2021
Merged

fix(js): do not render empty sections #594

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b25c140
fix(js): do not render empty sections
shortcuts May 25, 2021
ed3bc3d
update examples
shortcuts May 25, 2021
7ef2e6f
fix comparison
shortcuts May 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 74 additions & 4 deletions packages/autocomplete-js/src/__tests__/render.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import {
import { autocomplete } from '../autocomplete';

describe('render', () => {
const sourceId1 = 'testSource1';
const sourceId2 = 'testSource2';

beforeEach(() => {
document.body.innerHTML = '';
});
Expand Down Expand Up @@ -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');

Expand Down Expand Up @@ -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');

Expand Down Expand Up @@ -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();
});
});
});
158 changes: 81 additions & 77 deletions packages/autocomplete-js/src/render.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Comment thread
shortcuts marked this conversation as resolved.
Outdated
)
.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>
Expand Down