[EuiAccordion] Disable transition on initial render when initialsOpen

packages/eui/changelogs/upcoming/8327.md

@@ -0,0 +1,2 @@
+- Updated `EuiAccordion` to prevent content from being transitioned on initial render when `initialIsOpen=true`
+

packages/eui/src/components/accordion/__snapshots__/accordion.test.tsx.snap

@@ -830,7 +830,7 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
   </div>
   <div
     aria-labelledby="generated-id"
-    class="euiAccordion__childWrapper emotion-euiAccordion__childWrapper-isOpen"
+    class="euiAccordion__childWrapper emotion-euiAccordion__childWrapper-isOpen-noTransition"
     id="12"
     role="group"
     style="block-size: 0;"

packages/eui/src/components/accordion/accordion.tsx

@@ -234,6 +234,7 @@ export class EuiAccordionClass extends Component<
           isLoading={isLoading}
           isLoadingMessage={isLoadingMessage}
           isOpen={this.isOpen}
+          initialIsOpen={initialIsOpen}
         >
           {children}
         </EuiAccordionChildren>

packages/eui/src/components/accordion/accordion_children/accordion_children.styles.ts

@@ -59,6 +59,15 @@ export const euiAccordionChildWrapperStyles = (
          users on Chrome & FF */
       ${euiFocusRing(euiThemeContext)}
     `,
+    // choosing to override transition instead of applying it conditionally
+    // to keep a more logical style appliance:
+    // default case = has transition as part of default styles (all cases expect initial isOpen=true when initialIsOpen=true)
+    // special case: no transition for initial isOpen=true when initialIsOpen=true
+    noTransition: css`
+      ${euiCanAnimate} {
+        transition: none;
+      }
+    `,
     isClosed: css`
       ${logicalCSS('height', 0)}
       opacity: 0;

packages/eui/src/components/accordion/accordion_children/accordion_children.tsx

@@ -10,6 +10,7 @@ import React, {
   FunctionComponent,
   HTMLAttributes,
   useCallback,
+  useEffect,
   useMemo,
   useState,
 } from 'react';
@@ -28,7 +29,12 @@ import {
 type _EuiAccordionChildrenProps = HTMLAttributes<HTMLDivElement> &
   Pick<
     EuiAccordionProps,
-    'role' | 'children' | 'paddingSize' | 'isLoading' | 'isLoadingMessage'
+    | 'role'
+    | 'children'
+    | 'paddingSize'
+    | 'initialIsOpen'
+    | 'isLoading'
+    | 'isLoadingMessage'
   > & {
     isOpen: boolean;
   };
@@ -41,6 +47,7 @@ export const EuiAccordionChildren: FunctionComponent<
   isLoading,
   isLoadingMessage,
   isOpen,
+  initialIsOpen,
   ...rest
 }) => {
   /**
@@ -61,12 +68,22 @@ export const EuiAccordionChildren: FunctionComponent<
   /**
    * Wrapper
    */
+  const [hasTransition, setHasTransition] = useState(false);
   const wrapperStyles = euiAccordionChildWrapperStyles(euiTheme);
   const wrapperCssStyles = [
     wrapperStyles.euiAccordion__childWrapper,
     isOpen ? wrapperStyles.isOpen : wrapperStyles.isClosed,
+    initialIsOpen && !hasTransition && isOpen && wrapperStyles.noTransition,
   ];
 
+  /* Controls enabling opening/closing transitions on first interaction
+  when initialIsOpen=true; this only runs once */
+  useEffect(() => {
+    if (initialIsOpen && !isOpen && !hasTransition) {
+      setHasTransition(true);
+    }
+  }, [isOpen, initialIsOpen, hasTransition]);
+
   /**
    * Update the accordion wrapper height whenever the accordion opens, and also
    * whenever the child content updates (which will change the height)