fix(accordion): defaulting to skip initial animation until first render

Author: ShaneK

core/src/components/accordion/accordion.tsx

@@ -55,7 +55,7 @@ export class Accordion implements ComponentInterface {
    * This prevents the accordion from animating when
    * it starts expanded or collapsed.
    */
-  private skipNextAnimation = false;
+  private skipNextAnimation = true;
 
   @Element() el?: HTMLElement;
 

packages/react/test/base/src/App.tsx

@@ -37,6 +37,7 @@ import KeepContentsMounted from './pages/overlay-components/KeepContentsMounted'
 import OverlayComponents from './pages/overlay-components/OverlayComponents';
 import OverlayHooks from './pages/overlay-hooks/OverlayHooks';
 import ReorderGroup from './pages/ReorderGroup';
+import AccordionGroup from './pages/AccordionGroup';
 
 setupIonicReact();
 
@@ -69,6 +70,7 @@ const App: React.FC = () => (
         <Route path="/icons" component={Icons} />
         <Route path="/inputs" component={Inputs} />
         <Route path="/reorder-group" component={ReorderGroup} />
+        <Route path="/accordion-group" component={AccordionGroup} />
       </IonRouterOutlet>
     </IonReactRouter>
   </IonApp>

packages/react/test/base/src/pages/AccordionGroup.tsx

@@ -0,0 +1,54 @@
+import { IonHeader, IonTitle, IonToolbar, IonPage, IonContent, IonAccordionGroup, IonAccordion, IonItem, IonLabel } from '@ionic/react';
+import { useEffect, useRef } from 'react';
+
+const AccordionGroup: React.FC = () =>  {
+  const accordionGroup = useRef<null | HTMLIonAccordionGroupElement>(null);
+
+  useEffect(() => {
+    if (!accordionGroup.current) {
+      return;
+    }
+
+    accordionGroup.current.value = ['first', 'third'];
+  }, []);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Accordion Group</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonAccordionGroup ref={accordionGroup} multiple={true}>
+          <IonAccordion value="first">
+            <IonItem slot="header" color="light">
+              <IonLabel>First Accordion</IonLabel>
+            </IonItem>
+            <div className="ion-padding" slot="content">
+              First Content
+            </div>
+          </IonAccordion>
+          <IonAccordion value="second">
+            <IonItem slot="header" color="light">
+              <IonLabel>Second Accordion</IonLabel>
+            </IonItem>
+            <div className="ion-padding" slot="content">
+              Second Content
+            </div>
+          </IonAccordion>
+          <IonAccordion value="third">
+            <IonItem slot="header" color="light">
+              <IonLabel>Third Accordion</IonLabel>
+            </IonItem>
+            <div className="ion-padding" slot="content">
+              Third Content
+            </div>
+          </IonAccordion>
+        </IonAccordionGroup>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default AccordionGroup;

packages/react/test/base/src/pages/Main.tsx

@@ -22,6 +22,9 @@ const Main: React.FC<MainProps> = () => {
       </IonHeader>
       <IonContent>
         <IonList>
+          <IonItem routerLink="/accordion-group">
+            <IonLabel>Accordion Group</IonLabel>
+          </IonItem>
           <IonItem routerLink="/overlay-hooks">
             <IonLabel>Overlay Hooks</IonLabel>
           </IonItem>