fix(createTearsheet): resolve focus out issue

carbon-design-system · Nov 27, 2024 · 0e02913 · 0e02913
1 parent cd33f92
commit 0e02913
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.tsx b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.tsx
@@ -310,6 +310,7 @@ export let CreateTearsheet = forwardRef(
           verticalPosition,
           closeIconDescription: '',
         }}
+        currentStep={currentStep}
       >
         <div className={`${blockClass}__content`} ref={contentRef}>
           <Form aria-label={title}>

diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
@@ -65,6 +65,11 @@ interface TearsheetShellProps extends PropsWithChildren {
    */
   className?: string;
 
+  /**
+   * Used to track the current step on components which use `StepsContext` and `TearsheetShell`
+   */
+  currentStep?: number;
+
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
@@ -238,6 +243,7 @@ export const TearsheetShell = React.forwardRef(
       children,
       className,
       closeIconDescription,
+      currentStep,
       description,
       hasCloseIcon,
       headerActions,
@@ -307,16 +313,12 @@ export const TearsheetShell = React.forwardRef(
     }
 
     useEffect(() => {
-      if (
-        open &&
-        position === depth &&
-        modalRef &&
-        !modalRef?.current.contains(document.activeElement)
-      ) {
+      if (open && position === depth) {
         // Focusing the first element or selectorPrimaryFocus element
         claimFocus(firstElement, modalRef, selectorPrimaryFocus);
       }
     }, [
+      currentStep,
       depth,
       firstElement,
       modalRef,