fix: Fix up accordions a bit (#3615)

react-bootstrap · Apr 10, 2019 · 511e566 · 511e566
1 parent 3f1de16
commit 511e566
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 38 deletions.
diff --git a/src/AccordionCollapse.js b/src/AccordionCollapse.js
@@ -13,15 +13,17 @@ const propTypes = {
   children: PropTypes.element.isRequired,
 };
 
-const AccordionCollapse = ({ children, eventKey, ...props }) => {
-  const contextEventKey = useContext(AccordionContext);
+const AccordionCollapse = React.forwardRef(
+  ({ children, eventKey, ...props }, ref) => {
+    const contextEventKey = useContext(AccordionContext);
 
-  return (
-    <Collapse in={contextEventKey === eventKey} {...props}>
-      {React.Children.only(children)}
-    </Collapse>
-  );
-};
+    return (
+      <Collapse ref={ref} in={contextEventKey === eventKey} {...props}>
+        <div>{React.Children.only(children)}</div>
+      </Collapse>
+    );
+  },
+);
 
 AccordionCollapse.propTypes = propTypes;
 

diff --git a/src/AccordionToggle.js b/src/AccordionToggle.js
@@ -30,9 +30,9 @@ const AccordionToggle = React.forwardRef(
     return (
       <Component
         ref={ref}
-        onClick={() => {
-          onSelect(eventKey);
-          if (onClick) onClick(eventKey);
+        onClick={e => {
+          onSelect(eventKey, e);
+          if (onClick) onClick(e);
         }}
         {...props}
       >

diff --git a/test/AccordionSpec.js b/test/AccordionSpec.js
@@ -88,6 +88,5 @@ describe('<Accordion>', () => {
       .simulate('click');
 
     expect(onClickSpy).to.be.calledOnce;
-    expect(onClickSpy).to.be.calledWith('0');
   });
 });
diff --git a/www/src/examples/Accordion/AllCollapse.js b/www/src/examples/Accordion/AllCollapse.js
@@ -1,10 +1,7 @@
 <Accordion>
   <Card>
     <Card.Header>
-      <Accordion.Toggle
-        onClick={key => console.log(`I've been clicked by : ${key}`)}
-        eventKey="0"
-      >
+      <Accordion.Toggle as={Button} variant="link" eventKey="0">
         Click me!
       </Accordion.Toggle>
     </Card.Header>
@@ -14,10 +11,7 @@
   </Card>
   <Card>
     <Card.Header>
-      <Accordion.Toggle
-        onClick={key => console.log(`I've been clicked by : ${key}`)}
-        eventKey="1"
-      >
+      <Accordion.Toggle as={Button} variant="link" eventKey="1">
         Click me!
       </Accordion.Toggle>
     </Card.Header>

diff --git a/www/src/examples/Accordion/Basic.js b/www/src/examples/Accordion/Basic.js
@@ -1,10 +1,7 @@
 <Accordion defaultActiveKey="0">
   <Card>
     <Card.Header>
-      <Accordion.Toggle
-        onClick={key => console.log(`I've been clicked by : ${key}`)}
-        eventKey="0"
-      >
+      <Accordion.Toggle as={Button} variant="link" eventKey="0">
         Click me!
       </Accordion.Toggle>
     </Card.Header>
@@ -14,10 +11,7 @@
   </Card>
   <Card>
     <Card.Header>
-      <Accordion.Toggle
-        onClick={key => console.log(`I've been clicked by : ${key}`)}
-        eventKey="1"
-      >
+      <Accordion.Toggle as={Button} variant="link" eventKey="1">
         Click me!
       </Accordion.Toggle>
     </Card.Header>

diff --git a/www/src/examples/Accordion/EntireHeaderClickable.js b/www/src/examples/Accordion/EntireHeaderClickable.js
@@ -1,22 +1,14 @@
 <Accordion defaultActiveKey="0">
   <Card>
-    <Accordion.Toggle
-      as={Card.Header}
-      onClick={key => console.log(`I've been clicked by : ${key}`)}
-      eventKey="0"
-    >
+    <Accordion.Toggle as={Card.Header} eventKey="0">
       Click me!
     </Accordion.Toggle>
     <Accordion.Collapse eventKey="0">
       <Card.Body>Hello! I'm the body</Card.Body>
     </Accordion.Collapse>
   </Card>
   <Card>
-    <Accordion.Toggle
-      as={Card.Header}
-      onClick={key => console.log(`I've been clicked by : ${key}`)}
-      eventKey="1"
-    >
+    <Accordion.Toggle as={Card.Header} eventKey="1">
       Click me!
     </Accordion.Toggle>
     <Accordion.Collapse eventKey="1">