Here is the link to the codesandbox
And here is the code snippet:
import "./styles.css";
import {
Flex,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs
} from "@chakra-ui/react";
import { SketchField, Tools } from "react-sketch";
export default function App() {
return (
<Flex height="100vh" width="100vw">
<Tabs width="100%" display="flex" flexDirection="column" defaultIndex={0}>
<TabList>
{["Play", "Draw"].map((val) => (
<Tab key={Math.random()}>{val}</Tab>
))}
</TabList>
<TabPanels flex="1 1 auto">
<TabPanel padding={0} height="100%">
<h1>Hello world </h1>
</TabPanel>
<TabPanel padding={0} height="100%">
<Flex height="100%" width="100%">
<SketchField
width="100%"
height="100%"
widthCorrection={0}
tool={Tools.Pencil}
lineColor="#3182CE"
lineWidth={3}
/>
</Flex>
</TabPanel>
</TabPanels>
</Tabs>
</Flex>
);
}
Currently facing an issue where the canvas element in the second tab does not render properly. It seems that its width and height are both zero. I have tried using different canvas components like react-canvas-draw, but the same issue persists. This could be a problem with how Chakra UI tabs interact with React rendering.
Any suggestions on fixing this? Ideally, I want the canvas component to expand to take up the "remaining height and width." I've used '100%' for width and height as I don't know the exact dimensions available for the canvas component.
Note: Interestingly, changing the default index of the tabs to 1 (making the second tab initially active) allows the canvas component to work correctly. The reason behind this behavior is still unclear.