diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx index 3d2f557af2..6273d09550 100644 --- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx +++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx @@ -30,9 +30,10 @@ import { DASHBOARD_GRID_ID, DASHBOARD_ROOT_DEPTH, } from 'src/dashboard/util/constants'; -import { getRootLevelTabIndex } from './utils'; +import { getRootLevelTabIndex, getRootLevelTabsComponent } from './utils'; import { Filters } from '../../reducers/types'; import { getChartIdsInFilterScope } from '../../util/activeDashboardFilters'; +import findTabIndexByComponentId from '../../util/findTabIndexByComponentId'; import { findTabsWithChartsInScope } from '../nativeFilters/utils'; import { setInScopeStatusOfFilters } from '../../actions/nativeFilters'; @@ -57,7 +58,13 @@ const DashboardContainer: FC = ({ topLevelTabs }) => { const dispatch = useDispatch(); useEffect(() => { - setTabIndex(getRootLevelTabIndex(dashboardLayout, directPathToChild)); + const nextTabIndex = findTabIndexByComponentId({ + currentComponent: getRootLevelTabsComponent(dashboardLayout), + directPathToChild, + }); + if (nextTabIndex > -1) { + setTabIndex(nextTabIndex); + } }, [getLeafComponentIdFromPath(directPathToChild)]); // recalculate charts and tabs in scopes of native filters only when a scope or dashboard layout changes diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx index 83d75bc262..83c9a6a8e8 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx @@ -185,7 +185,10 @@ export class Tabs extends React.PureComponent { // make sure nextFocusComponent is under this tabs component if (nextTabIndex > -1 && nextTabIndex !== this.state.tabIndex) { - this.setState(() => ({ tabIndex: nextTabIndex })); + this.setState(() => ({ + tabIndex: nextTabIndex, + activeKey: nextTabsIds[nextTabIndex], + })); } } }