Fix Add AccordionHeader onToggle callback (#1121)

equinor · Feb 22, 2021 · b6d85fd · b6d85fd
1 parent e0e60f6
commit b6d85fd
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/libraries/core-react/src/components/Accordion/Accordion.test.tsx b/libraries/core-react/src/components/Accordion/Accordion.test.tsx
@@ -81,6 +81,17 @@ describe('Accordion', () => {
     fireEvent.click(header)
     expect(header).toHaveAttribute('aria-expanded', 'true')
   })
+  it('triggers onToggle callback', () => {
+    const mockOnToggle = jest.fn()
+    render(
+      <AccordionItem isExpanded>
+        <AccordionHeader onToggle={mockOnToggle}>Summary 1</AccordionHeader>
+      </AccordionItem>,
+    )
+    const header = screen.queryByText('Summary 1').parentNode
+    fireEvent.click(header)
+    expect(mockOnToggle).toHaveBeenCalled()
+  })
   it('Set header level', () => {
     render(<SimpleAccordion headerLevel="h3" />)
     expect(document.querySelectorAll('h3')).toHaveLength(2)

diff --git a/libraries/core-react/src/components/Accordion/AccordionHeader.tsx b/libraries/core-react/src/components/Accordion/AccordionHeader.tsx
@@ -90,6 +90,8 @@ type AccordionHeaderProps = {
   disabled?: boolean
   /** @ignore */
   toggleExpanded?: () => void
+  /** Accordion item toggle callback */
+  onToggle?: () => void
 } & AccordionProps &
   HTMLAttributes<HTMLDivElement>
 
@@ -116,13 +118,19 @@ const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
     const handleClick = () => {
       if (!disabled) {
         toggleExpanded()
+        if (props.onToggle) {
+          props.onToggle()
+        }
       }
     }
 
     const handleKeyDown = (event: React.KeyboardEvent) => {
       const { key } = event
       if (key === 'Enter' || key === ' ') {
         toggleExpanded()
+        if (props.onToggle) {
+          props.onToggle()
+        }
         event.preventDefault()
       }
     }