I'm having issues where the survey is resetting back to page 1 every time any part of the DOM is updated. If i resize page, the survey restarts. If i switch to a separate material-ui tab, the survey restarts. I actually changed the tabs to HIDE the HTML instead of replace, and the survey still restarts. I tried the cookieName as well but it didnt seem to fix the rerendering issues. Let me know if you need more info. Thank you.
Here is my tabPanel code:
<Tabs variant="fullWidth" value={value} onChange={handleChange} aria-label="tabs">
<Tab id="simple-tab-0" aria-controls="simple-tabpanel-0" label="Walklist" />
<Tab id="simple-tab-1" aria-controls="simple-tabpanel-1" label="Survey" />
</Tabs>
<TabPanel value={value} index={0} className={null} hiddenContainer={classes.hiddenContainer}>
<List changePage={(resetSubject: boolean = false) => handleChange(0, 1, resetSubject)}></List>
</TabPanel>
<TabPanel value={value} index={1} className={null} hiddenContainer={classes.hiddenContainer}>
<div className={classes.surveyContainer}>
<Survey></Survey>
</div>
</TabPanel>
Here is the return for Survey.jsx code:
export default function Survey() {
return (
<div>
<LoadingOverlay active={loadingActive} spinner={<BounceLoader />} text="Loading" className={classes.loading}>
<div className={classes.survey}>
<Survey.Survey
model={surveylocal}
onCompleting={onCompleting}
onValueChanged={onValueChanged}
onCurrentPageChanging={onCurrentPageChanging}
onAfterRenderPage={onAfterRenderPage}
/>
</div>
<Backdrop className={classes.backdrop} open={openBackDrop} onClick={handleCloseBackDrop}>
<CircularProgress color="inherit" />
</Backdrop>
</div>
);
}