Transition each tab broken after setState

[muhammad haikal]

i have this code, the goals is to know wich one is tab are active. The problem with this code is the tranisiton when changing tab not working. maybe any other way to know which tab are active?

import { Box, Stack, Typography } from "@mui/material";

import {

SelectEventArgs,

TabComponent,

TabItemDirective,

TabItemsDirective,

} from "@syncfusion/ej2-react-navigations";

import React, { FC, useEffect, useRef, useState } from "react";

import { useLocation, useNavigate } from "react-router-dom";

import ApBasicButton from "src/components/ApBasicButton";

const onProgress = () => {

return <Typography>On Progress</Typography>;

};

interface HeaderTabTemplateProps {

title: string;

point: string;

isActive: boolean;

}

const HeaderTabTemplate: FC<HeaderTabTemplateProps> = ({

title,

point,

isActive,

}) => {

return (

<Stack flexDirection="row" alignItems="center" sx={{ mb: "12px" }}>

<Typography

typography="SM1Bold"

color={isActive ? "#3565FC" : "#000"} // Example of conditional styling

sx={{ textTransform: "none" }}

>

{title}

</Typography>

<Box

sx={{

borderRadius: "50px",

bgcolor: "brand05.main",

padding: "2px 8px",

ml: "4px",

}}

>

<Typography typography="XS2Bold" color="#3565FC">

{point}

</Typography>

</Box>

</Stack>

);

};

const PrepopulatedFakturKeluaranContent = () => {

const location = useLocation();

const tabRef = useRef<TabComponent>(null);

const navigate = useNavigate();

const [activeIndex, setActiveIndex] = useState(0); // State to track active tab

const selected = (args: SelectEventArgs) => {

setActiveIndex(args.selectedIndex);

};

useEffect(() => {

const tab = location.state?.tab;

if (tab !== undefined && tabRef.current) {

tabRef.current.select(tab);

navigate(location.pathname, { replace: true, state: {} });

}

}, [location.state]);

return (

<>

<Box pt="40px">

<Stack

flexDirection="row"

justifyContent="space-between"

alignItems="center"

>

<Typography typography="MD1Bold" color="textBlack.main">

Prepopulated Faktur Keluaran

</Typography>

<ApBasicButton

title="Prepopulated SPPB (BC 4.0)"

appearance="info"

size="md"

type="basic"

/>

</Stack>

<TabComponent className="tab_content" ref={tabRef} selected={selected}>

<TabItemsDirective>

<TabItemDirective

headerTemplate={() => (

<HeaderTabTemplate

title="Dalam Proses"

point="10"

isActive={activeIndex === 0} // Check if this tab is active

/>

)}

content={onProgress}

/>

<TabItemDirective

headerTemplate={() => (

<HeaderTabTemplate

title="Selesai"

point="20"

isActive={activeIndex === 1} // Check if this tab is active

/>

)}

content={onProgress}

/>

</TabItemsDirective>

</TabComponent>

</Box>

</>

);

};

export default PrepopulatedFakturKeluaranContent;

[Vijay Ravi]

Hi muhammad haikal, 

Thanks for reaching out to us.
 

The issue you're facing might be due to the way you're managing the active tab state. You're using a useRef to hold a reference to the TabComponent, and then calling select on it to change the active tab. However, this might not trigger a re-render of the component, which is why the transition might not be working.

Instead, you could manage the active tab state using useState and pass the active tab index directly to the TabComponent as a prop. The TabComponent should automatically handle the transition when the active tab changes.

[index.js]

 

const PrepopulatedFakturKeluaranContent = () => {

    const location = useLocation();

    const navigate = useNavigate();

    const [activeIndex, setActiveIndex] = useState(0);

  

    const selected = (args) => {

      setActiveIndex(args.selectedIndex);

    };

  

    useEffect(() => {

      const tab = location.state?.tab;

      if (tab !== undefined) {

        setActiveIndex(tab);

        navigate(location.pathname, { replace: true, state: {} });

      }

    }, [location.state, navigate]);

  

    return (

      <Box pt="40px">

        <Stack flexDirection="row" justifyContent="space-between" alignItems="center">

          <Typography variant="h5" color="textBlack.main">

            Prepopulated Faktur Keluaran

          </Typography>

        </Stack>

  

        <TabComponent className="tab_content" selected={selected} selectedIndex={activeIndex}>

          <TabItemsDirective>

            <TabItemDirective

              headerTemplate={() => (

                <HeaderTabTemplate

                  title="Dalam Proses"

                  point="10"

                  isActive={activeIndex === 0}

                />

              )}

              content={OnProgress}

            />

            <TabItemDirective

              headerTemplate={() => (

                <HeaderTabTemplate

                  title="Selesai"

                  point="20"

                  isActive={activeIndex === 1}

                />

              )}

              content={OnProgress}

            />

          </TabItemsDirective>

        </TabComponent>

      </Box>

    );

  };

Sample link: https://stackblitz.com/edit/react-sfzmbq-tehtwd?file=index.js,package.json

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay