[Page Layouts] Focus specific tabs on mobile and side panel (#15984)

## On mobile https://github.com/user-attachments/assets/4a8017b2-56a9-4759-bc18-8d99fed9f80a ## In side panel https://github.com/user-attachments/assets/f36f0827-699a-4f76-8e84-a8ceaeb71396 ## Dashboards Untouched, but keep working. https://github.com/user-attachments/assets/fe583f80-ea8d-453e-95ea-6b99175d1899 ## Other Record Page Layouts Untouched, but keep working. https://github.com/user-attachments/assets/c64f731f-5d28-4585-8cb5-c3940fb1ab6f
2025-11-21 13:39:17 +01:00
parent 0a2d42e79f
commit 3e187b4ce3
7 changed files with 288 additions and 2 deletions
@@ -116,6 +116,9 @@ export const PageLayoutRendererContent = () => {
          <PageLayoutTabListEffect
            tabs={sortedTabs}
            componentInstanceId={tabListInstanceId}
+            defaultTabIdToFocusOnMobileAndSidePanel={
+              currentPageLayout.defaultTabIdToFocusOnMobileAndSidePanel
+            }
          />
          {(sortedTabs.length > 1 || isPageLayoutInEditMode) && (
            <StyledPageLayoutTabList
@@ -1,6 +1,9 @@
 import { type PageLayoutTab } from '@/page-layout/types/PageLayoutTab';
+import { getPageLayoutTabListInitialActiveTabId } from '@/page-layout/utils/getPageLayoutTabListInitialActiveTabId';
+import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
 import { type TabListProps } from '@/ui/layout/tab-list/types/TabListProps';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
 import { useEffect } from 'react';

@@ -9,20 +12,30 @@ type PageLayoutTabListEffectProps = Pick<
  'componentInstanceId' | 'onChangeTab'
 > & {
  tabs: PageLayoutTab[];
+  defaultTabIdToFocusOnMobileAndSidePanel?: string;
 };

 export const PageLayoutTabListEffect = ({
  tabs,
  onChangeTab,
  componentInstanceId,
+  defaultTabIdToFocusOnMobileAndSidePanel,
 }: PageLayoutTabListEffectProps) => {
  const [activeTabId, setActiveTabId] = useRecoilComponentState(
    activeTabIdComponentState,
    componentInstanceId,
  );

-  const activeTabExists = tabs.some((tab) => tab.id === activeTabId);
-  const initialActiveTabId = activeTabExists ? activeTabId : tabs[0]?.id;
+  const isMobile = useIsMobile();
+  const { isInRightDrawer } = useLayoutRenderingContext();
+
+  const initialActiveTabId = getPageLayoutTabListInitialActiveTabId({
+    activeTabId,
+    tabs,
+    defaultTabIdToFocusOnMobileAndSidePanel,
+    isMobile,
+    isInRightDrawer,
+  });

  useEffect(() => {
    setActiveTabId(initialActiveTabId);