Sheet is not reopening in desktop Chrome about react-modal-sheet

[younes0]

workaround

import { PropsWithChildren } from "react";
import Sheet from "react-modal-sheet";

interface Props extends PropsWithChildren {
  isOpen: boolean;
  setIsOpen: (isOpen: boolean) => void;
}

const BottomSheet = ({ children, isOpen, setIsOpen }: Props) => (
  <Sheet
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    style={{
      zIndex: isOpen ? "9999999" : "-1",
      visibility: isOpen ? "visible" : "hidden",
    }}
  >
    <Sheet.Container>
      <Sheet.Content>{children}</Sheet.Content>
    </Sheet.Container>
  </Sheet>
);

export default BottomSheet;

[younes0]

@Temzasse @bamnenim-kryptonium happens since always and on all demos

[sharpsteelsoftware]

Also in Chrome if you use the Scroller and start to drag down, but not enough to actually dismiss the dialog, then the dialog will be frozen in a display space and unable to interact with site.

[evist0]

This seems to relate to this issue.

Sheet does not reopen only when using prefers reduce motion, which causes the values ​​to change too quickly and AnimatePresence starts to glitch.