reactjs
classNames gets removed when state changes
What is the current behavior? when the drawer is opened and the Toggle theme button is clicked the theme changes however the drawer immediately closes. I noticed that the
<CSSTransition classnames />actually gets removed when the toggle button is clicked. Below is an example of the drawer component we built and i have also shown a working example of the Drawer component with the unexpected behaviour in sandbox https://codesandbox.io/s/drawer-g1hloq?file=/src/App.tsx
{handleCloseButtonClick => (
<CSSTransition
in={open}
timeout={getTransitionDuration(
`${drawerPath}.panel.${placement}`,
'',
)({theme, overrides})}
classNames="nk-drawer"
appear
>
<StyledDrawer
aria-hidden={!open}
open={open}
disableFocusTrap={disableFocusTrap}
handleCloseButtonClick={handleCloseButtonClick}
path={drawerPath}
data-testid={drawerPath}
placement={placement}
closePosition={closePosition}
overrides={overrides}
ref={drawerRef}
inline={inline}
{...props}
>
{children}
</StyledDrawer>
</CSSTransition>
What is the expected behaviour? The className on CSSTransiton should not be removed when state is updated. I think that should fix my problem of the drawer closing on toggle. Any help is really appreciated and sorry in advance if i am missing something really obvious
Could you provide a CodeSandbox demo reproducing the bug? sandbox example here https://codesandbox.io/s/drawer-g1hloq?file=/src/App.tsx
