Changing Modal Prop to true or false conditionally causes drawer to rerender content

[thediveshsharma]

modal={isMenuOpen ? false : true}

When doing something like this, the drawer content re-renders and whatever typed in input just disappears.
<DrawerRoot
className="xyz"
open={open}
onOpenChange={onOpenChange}
modal={isMenuOpen ? false : true}
// onClose={onClose}
>

<div
className={cn(
styles.drawerCols,
modalName === modals.EditNumber && styles.editNumberCols,
modalName === modals.OtpVerifyEditNumber && styles.otpVerifyCols,
modalName === modals.YourMotorcycle && styles.yourMotorCols
)}
style={{
paddingLeft: "1rem",
paddingRight: "0.688rem",
paddingBottom: "0",
}}
>

<button
className={cn(
styles["dialog_close-button"],
styles.closeBtn,
successModal ? styles.closeBtnHide : "",
detailPlan ? styles.detailCloseBtn : ""
)}
onClick={onClose}
>


{children} ----> it has a component with input whatever typed in it will disappear as soon as modal prop changes.

[thediveshsharma]

https://codesandbox.io/p/devbox/drawer-non-dismissable-forked-xkwd25?file=%2Fapp%2Fmy-drawer.tsx%3A64%2C34&workspaceId=e86b3ebb-ab1b-4e36-9117-eb96c9581766

**Type anything in the input in code sandbox.. wait for modal prop to change, as soon as modal prop changes text disappears since drawer re-renders **

[thediveshsharma]

Can someone help with this?

[thediveshsharma]

any update on this?

[HashCookie]

Hi, have you solved it? I also have the same issue.

[liamb13]

I believe I've found a work around.

It's a little bit hacky, but it worked for me.

Under the hood, it's using the same functionality as radix-ui (thanks to this reddit thread).

Rather than change the Drawer itself, here's my approach.

'use client';
import { ReactNode, useEffect, useState } from 'react';

import { classNames } from '~/utils/classNames';

import { RemoveScroll } from 'react-remove-scroll';

import { Drawer, DrawerContent } from '~/components/ui/drawer';

const snaps = {
  mini: '220px',
  expand: 0.75,
};

export default function MobileDrawer({ children }: { children: ReactNode }) {
  const [snap, setSnap] = useState<number | string | null>(snaps.mini);
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    if (snap === snaps.expand) {
      setIsOpen(true);
    } else {
      setIsOpen(false);
    }
    return () => {
      setIsOpen(false);
    };
  }, [snap]);
  return (
    <>
      <RemoveScroll enabled={isOpen}>
        <div className="pointer-events-none fixed inset-0" />
      </RemoveScroll>
      <Drawer
        shouldScaleBackground={false}
        dismissible={false}
        modal={false}
        activeSnapPoint={snap}
        setActiveSnapPoint={setSnap}
        open={true}
        snapPoints={[snaps.mini, snaps.expand]}
      >
        <DrawerContent className="pointer-events-auto fixed bottom-0 left-0 right-0 h-full flex-col rounded-t-[10px] bg-white">
          <div
            className={classNames(
              {
                'overflow-y-scroll': snap !== snaps.mini,
                'overflow-hidden': snap === snaps.mini,
              },
              'max-h-[calc(80vh - 24px)]',
            )}
          >
            {children}
          </div>
        </DrawerContent>
      </Drawer>
    </>
  );
}

Then in your stylesheet:

body[data-scroll-locked] {
  pointer-events: none;
}

Please let me know if this works for you.

[bitofbreeze]

Have you tried memoizing the child?