Open nachodeh opened 11 months ago
I'm using an older version of precedent (few weeks old) and I'm experiencing an issue with the Modal animations. The start animations play properly, but the exit animations do not play. Does anyone know how to fix it?
This is the code:
return ( <AnimatePresence> {showModal && ( <> {isMobile && <Leaflet setShow={setShowModal}>{children}</Leaflet>} {isDesktop && ( <> <FocusTrap focusTrapOptions={{ initialFocus: false }}> <motion.div ref={desktopModalRef} key="desktop-modal" className="fixed inset-0 z-40 hidden min-h-screen items-center justify-center md:flex" initial={{ scale: 0.95 }} animate={{ scale: 1 }} exit={{ scale: 0.95 }} onMouseDown={(e) => { if (desktopModalRef.current === e.target) { setShowModal(false); } }} > {children} </motion.div> </FocusTrap> <motion.div key="desktop-backdrop" className="fixed inset-0 z-30 bg-gray-100 bg-opacity-10 backdrop-blur" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} onClick={() => setShowModal(false)} /> </> )} </> )} </AnimatePresence> );
I can see the issue live on https://precedent.dev/ so presumably it's still there with the new code.
I am getting this error on the same modal for some reason: Type error: 'FocusTrap' cannot be used as a JSX component.
I'm using an older version of precedent (few weeks old) and I'm experiencing an issue with the Modal animations. The start animations play properly, but the exit animations do not play. Does anyone know how to fix it?
This is the code:
I can see the issue live on https://precedent.dev/ so presumably it's still there with the new code.