Using React.
I have a problem to run some code when a routable tab becomes active.
The Tabs onTabShow event only fires when navigating from a tab to another tab. It does not fire when navigating from outside the tabs to a tab.
<Tab
onTabShow={() => setActiveTab(tab)}
key={tab.id}
className="page-content"
id={tab.id} />
Let’s say I have 3 tabs, if the user is on another page and navigates to tab1 then tab1 does not fire onTabShow. If the user then navigates from tab1 to tab2 it fires, and if the user navigates back to tab1 it now also fires. I cannot set tab1 as the default for entering the tabs as the user can navigate from outside the tabs to any of tab1 to tab3.
I tried running an effect in React on the tab’s content component, but it also does not work correctly.
useEffect(() => {
navbarDispatchActions.SET_NAVBAR_TITLE(
dispatchStore,
title);
}, []);
If the user is on another page and navigates to tab1 then tab1 effect runs. If the user navigates to any other tab it also runs for that tab, but if the user navigates back to tab1 then tab1 effect does not run. Tab1 effect only runs the very first time but the other tab effects run every time that tab becomes visible. And this behavior is not localized to tab1. If the user navigates from outside the tabs to tab2 then tab2 will display that behavior.
So my question is, is there a method to be notified when a tab becomes active, no matter what tab the user navigates to from outside the tabs for the first time.