Skip to content

Commit e777d8e

Browse files
authored
Close accordion item if clicked when open. (#744)
* Close accordion item if clicked a second time * Add test
1 parent 0ebea4f commit e777d8e

File tree

2 files changed

+23
-0
lines changed

2 files changed

+23
-0
lines changed

src/components/accordion/Accordion.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ const Accordion = props => {
3737
if (setProps) {
3838
if (active_item !== item) {
3939
setProps({active_item: item});
40+
} else {
41+
setProps({active_item: null});
4042
}
4143
}
4244
};

src/components/accordion/__tests__/Accordion.test.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,5 +128,26 @@ describe('Accordion', () => {
128128
expect(
129129
accordionItems.children[1].querySelector('div.accordion-collapse')
130130
).toHaveClass('show');
131+
132+
// clicking on an open item closes it
133+
userEvent.click(
134+
accordionItems.children[1].querySelector('h2.accordion-header > button')
135+
);
136+
expect(mockSetProps.mock.calls).toHaveLength(2);
137+
138+
rerender(
139+
<Accordion setProps={mockSetProps} {...mockSetProps.mock.calls[1][0]}>
140+
<AccordionItem title="item-title-1">item-content-1</AccordionItem>
141+
<AccordionItem title="item-title-2">item-content-2</AccordionItem>
142+
</Accordion>
143+
);
144+
jest.runAllTimers();
145+
146+
expect(
147+
accordionItems.children[0].querySelector('div.accordion-collapse')
148+
).not.toHaveClass('show');
149+
expect(
150+
accordionItems.children[1].querySelector('div.accordion-collapse')
151+
).not.toHaveClass('show');
131152
});
132153
});

0 commit comments

Comments
 (0)