No content after refresh

[KMika-Sages]

When Im on different tab than first, when I refresh the page, there is weird error where no content on any tab is visible, and first tab is underlined as active.

As you can see in the picture there is content in console in third tab, but the panel is not active. Can you give me inside on this?

I can share the code.

For url params i use use-query-params

[danez]

Can you please share an example? If I look at the code of the TabPanel this should not be possible.

[KMika-Sages]

`

const FinanceTabPanel = (props: any) => {
const { edges, financeCategories } = props
const FINANCE_CATEGORIES: string[] = financeCategories

const [tab, setTab] = useQueryParam("tab", withDefault(StringParam, FINANCE_CATEGORIES[0]))
const selectedTabIndex = edges.map(panel => panel.node.financeTabId).indexOf(tab)

const handleTabChange = (newTabIndex: number) => {
    if (newTabIndex !== selectedTabIndex) {
        setTab(FINANCE_CATEGORIES[newTabIndex])
    }
}

return (
    <section className="finance-section">
        <div className="tab-panel_wrapper">
            <Tabs selectedIndex={selectedTabIndex} onSelect={handleTabChange}>
                <TabList>
                    {edges.map((tab: FinancePropsProperties, idx: number) => (
                        <Tab key={idx}>{tab.node.financeTabName}</Tab>
                    ))}
                </TabList>

                {edges.map((tab: FinancePropsProperties, index: number) => (
                    <TabPanel key={index}>
                        <FinanceTarget props={edges[index]} />
                        {tab.node?.trainingITTopics ? (
                            <OpenTrainingsTopics props={edges[index]} />
                        ) : (
                            <React.Fragment />
                        )}
                        {tab.node?.financeApplicationTitle ? (
                            <FinanceApplication props={edges[index]} />
                        ) : (
                            <React.Fragment />
                        )}
                        {tab.node?.recruitment ? <Recruitment props={edges[index]} /> : <React.Fragment />}
                        {tab.node?.financeDownloadableFiles ? (
                            <DownloadFiles props={edges[index]} />
                        ) : (
                            <React.Fragment />
                        )}
                        {tab.node?.informationReference ? (
                            <InformationReference props={edges[index]} />
                        ) : (
                            <React.Fragment />
                        )}
                    </TabPanel>
                ))}
            </Tabs>
        </div>
    </section>
)

} `

[KMika-Sages]

Can you please share an example? If I look at the code of the TabPanel this should not be possible.

And if you want live example then go https://www.sages.pl/blog Choose tab different than first and refresh page

[xSyki]

@danez I had the same problem. Updating to a new version of react-tabs and react helped. I think you can close this issue.

[joaobarbosaap]

Looks like your problem is related with your application state, when I refresh your website after your example I can see a blank screen, but if you check the UI, you will notice that the first tab is selected, and your URL is requesting the data for another tab, so you need to sync your tab with your current URL in order to fix it.