From 640083bd1f3fa146d6f9d823971f21f1c91f9749 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 15 Jun 2020 14:42:12 -0600
Subject: [PATCH 1/4] call onToggle

---
 .../src/views/accordion/accordion_example.js  |  5 +++--
 .../views/accordion/accordion_forceState.js   |  7 +++++++
 src/components/accordion/accordion.tsx        | 21 +++++++++++--------
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src-docs/src/views/accordion/accordion_example.js b/src-docs/src/views/accordion/accordion_example.js
index e1e19e1a241..2a3ea4b4a9e 100644
--- a/src-docs/src/views/accordion/accordion_example.js
+++ b/src-docs/src/views/accordion/accordion_example.js
@@ -332,7 +332,7 @@ export const AccordionExample = {
       demo: <AccordionForm />,
     },
     {
-      title: 'Force accordion state',
+      title: 'External state control',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -346,7 +346,8 @@ export const AccordionExample = {
       text: (
         <p>
           Use the <EuiCode>forceState</EuiCode> prop to control open and close
-          state.
+          state. The <EuiCode>onToggle</EuiCode> callback prop can still be used
+          to update external state or perform side effects.
         </p>
       ),
       snippet: accordionForceStateSnippet,
diff --git a/src-docs/src/views/accordion/accordion_forceState.js b/src-docs/src/views/accordion/accordion_forceState.js
index 7d3ee0335d1..b99843692a6 100644
--- a/src-docs/src/views/accordion/accordion_forceState.js
+++ b/src-docs/src/views/accordion/accordion_forceState.js
@@ -29,6 +29,12 @@ export default () => {
     setID(id);
   };
 
+  const onToggle = isOpen => {
+    const newState = isOpen ? 'closed' : 'open';
+    setTrigger(newState);
+    setID(`${idPrefix}--${newState}`);
+  };
+
   return (
     <div>
       <EuiButtonGroup
@@ -41,6 +47,7 @@ export default () => {
       <EuiAccordion
         id="accordion--forceState"
         forceState={trigger}
+        onToggle={onToggle}
         buttonContent="I am controlled via prop">
         <EuiText>
           <p>
diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
index ab0b7e2549d..f392762c7c0 100644
--- a/src/components/accordion/accordion.tsx
+++ b/src/components/accordion/accordion.tsx
@@ -121,15 +121,18 @@ export class EuiAccordion extends Component<
 
   onToggle = () => {
     const { forceState } = this.props;
-    if (forceState) return this.setState({ isOpen: forceState === 'open' });
-    this.setState(
-      prevState => ({
-        isOpen: !prevState.isOpen,
-      }),
-      () => {
-        this.props.onToggle && this.props.onToggle(this.state.isOpen);
-      }
-    );
+    if (forceState) {
+      this.props.onToggle && this.props.onToggle(forceState === 'open');
+    } else {
+      this.setState(
+        prevState => ({
+          isOpen: !prevState.isOpen,
+        }),
+        () => {
+          this.props.onToggle && this.props.onToggle(this.state.isOpen);
+        }
+      );
+    }
   };
 
   setChildContentRef = (node: HTMLDivElement | null) => {

From cafdefbd03a9f3d98e76e4bd6fa540f02f44f04b Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 15 Jun 2020 14:43:17 -0600
Subject: [PATCH 2/4] test it

---
 .../__snapshots__/accordion.test.tsx.snap         | 12 ++++++------
 src/components/accordion/accordion.test.tsx       | 15 +++++++++++++++
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
index edc08525519..3e52ffc5477 100644
--- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiAccordion behavior closes when clicked twice 1`] = `
 <EuiAccordion
   arrowDisplay="left"
-  id="9"
+  id="10"
   initialIsOpen={false}
   paddingSize="none"
 >
@@ -14,7 +14,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
       className="euiAccordion__triggerWrapper"
     >
       <button
-        aria-controls="9"
+        aria-controls="10"
         aria-expanded={false}
         className="euiAccordion__button"
         onClick={[Function]}
@@ -42,7 +42,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
     </div>
     <div
       className="euiAccordion__childWrapper"
-      id="9"
+      id="10"
     >
       <EuiResizeObserver
         onResize={[Function]}
@@ -61,7 +61,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
 exports[`EuiAccordion behavior opens when clicked once 1`] = `
 <EuiAccordion
   arrowDisplay="left"
-  id="8"
+  id="9"
   initialIsOpen={false}
   paddingSize="none"
 >
@@ -72,7 +72,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
       className="euiAccordion__triggerWrapper"
     >
       <button
-        aria-controls="8"
+        aria-controls="9"
         aria-expanded={true}
         className="euiAccordion__button"
         onClick={[Function]}
@@ -100,7 +100,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
     </div>
     <div
       className="euiAccordion__childWrapper"
-      id="8"
+      id="9"
     >
       <EuiResizeObserver
         onResize={[Function]}
diff --git a/src/components/accordion/accordion.test.tsx b/src/components/accordion/accordion.test.tsx
index db02b964cd9..8a66d2f2687 100644
--- a/src/components/accordion/accordion.test.tsx
+++ b/src/components/accordion/accordion.test.tsx
@@ -117,6 +117,21 @@ describe('EuiAccordion', () => {
 
         expect(component).toMatchSnapshot();
       });
+
+      it('accepts and calls an optional callback on click', () => {
+        const onToggleHandler = jest.fn();
+        const component = mount(
+          <EuiAccordion
+            id={getId()}
+            onToggle={onToggleHandler}
+            forceState="closed"
+          />
+        );
+
+        component.find('button').simulate('click');
+        expect(onToggleHandler).toBeCalled();
+        expect(onToggleHandler).toBeCalledWith(false);
+      });
     });
   });
 

From bf1956869f66372e5f8b8117e7bff91b049624e5 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 16 Jun 2020 13:44:05 -0600
Subject: [PATCH 3/4] onToggle returns expected state after click

---
 CHANGELOG.md                                | 1 +
 src/components/accordion/accordion.test.tsx | 2 +-
 src/components/accordion/accordion.tsx      | 3 ++-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7c8485c1d2f..bf8ac33c994 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Added `side` prop to `EuiGlobalToastList` for choosing which window side to display toasts ([#3600](https://github.com/elastic/eui/pull/3600))
 - Default `titleSize` get's implicitly set to 'm' for `EuiEmptyPrompt` ([#3598](https://github.com/elastic/eui/pull/3598))
 - Updated `logoElastic` to meet brand guidelines ([#3613](https://github.com/elastic/eui/pull/3613))
+- Updated `onToggle` callback in `EuiAccordion` to  allow for external state control ([#3614](https://github.com/elastic/eui/pull/3614))
 
 **Bug fixes**
 
diff --git a/src/components/accordion/accordion.test.tsx b/src/components/accordion/accordion.test.tsx
index 8a66d2f2687..d8281cce718 100644
--- a/src/components/accordion/accordion.test.tsx
+++ b/src/components/accordion/accordion.test.tsx
@@ -130,7 +130,7 @@ describe('EuiAccordion', () => {
 
         component.find('button').simulate('click');
         expect(onToggleHandler).toBeCalled();
-        expect(onToggleHandler).toBeCalledWith(false);
+        expect(onToggleHandler).toBeCalledWith(true);
       });
     });
   });
diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
index f392762c7c0..f4878942829 100644
--- a/src/components/accordion/accordion.tsx
+++ b/src/components/accordion/accordion.tsx
@@ -122,7 +122,8 @@ export class EuiAccordion extends Component<
   onToggle = () => {
     const { forceState } = this.props;
     if (forceState) {
-      this.props.onToggle && this.props.onToggle(forceState === 'open');
+      this.props.onToggle &&
+        this.props.onToggle(forceState === 'open' ? false : true);
     } else {
       this.setState(
         prevState => ({

From cf6ec37c06d41afb7129e351448ba93426de330e Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 16 Jun 2020 14:21:22 -0600
Subject: [PATCH 4/4] invert isOpen for docs

---
 src-docs/src/views/accordion/accordion_forceState.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/accordion/accordion_forceState.js b/src-docs/src/views/accordion/accordion_forceState.js
index b99843692a6..e0c5301795d 100644
--- a/src-docs/src/views/accordion/accordion_forceState.js
+++ b/src-docs/src/views/accordion/accordion_forceState.js
@@ -30,7 +30,7 @@ export default () => {
   };
 
   const onToggle = isOpen => {
-    const newState = isOpen ? 'closed' : 'open';
+    const newState = isOpen ? 'open' : 'closed';
     setTrigger(newState);
     setID(`${idPrefix}--${newState}`);
   };