From 8ef8a82b407f709ca1f96d6bbf77f6c415d29e8e Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Mon, 24 Jan 2022 12:26:25 +0200
Subject: [PATCH] Tabs: fix invalid tab value warning
---
.../components/main_layout/PerspectiveTabs.js | 23 ++++++++++++++-----
1 file changed, 17 insertions(+), 6 deletions(-)
diff --git a/src/client/components/main_layout/PerspectiveTabs.js b/src/client/components/main_layout/PerspectiveTabs.js
index d5f7374e..d9538c1e 100644
--- a/src/client/components/main_layout/PerspectiveTabs.js
+++ b/src/client/components/main_layout/PerspectiveTabs.js
@@ -27,15 +27,26 @@ const PerspectiveTabs = props => {
// const largeScreen = screenSize === 'xl'
// const scrollButtons = tabs.length > 3 ? 'auto' : 'on'
const location = useLocation()
+ const [currentTab, setCurrentTab] = useState(false) // false means that there are no active tabs
- const [value, setValue] = useState(pathnameToTabValue(location, tabs))
+ useEffect(
+ () => {
+ // Use a delay before setting current tab value to get rid of the MUI warning:
+ // "MUI: The `value` provided to the Tabs component is invalid.
+ // The Tab with this `value` ("0") is not part of the document layout.
+ // Make sure the tab item is present in the document or that it's not `display: none`.""
+ const timer = setTimeout(() => setCurrentTab(pathnameToTabValue(location, tabs)), 1000)
- useEffect(() => {
- setValue(pathnameToTabValue(location, tabs))
- }, [location])
+ // clear timeout when component unmounts
+ return () => {
+ clearTimeout(timer)
+ }
+ },
+ [location]
+ )
const handleChange = (event, newValue) => {
- setValue(newValue)
+ setCurrentTab(newValue)
}
return (
@@ -47,7 +58,7 @@ const PerspectiveTabs = props => {
})}
>
<Tabs
- value={value}
+ value={currentTab}
onChange={handleChange}
indicatorColor='secondary'
textColor='secondary'
--
GitLab