fix: stop experiment modal closing unexpectedly
@@ -45,6 +45,7 @@ const useModal = (
options?: ModalOptions,
): ModalHooks => {
const modalRef = useRef<ReturnType<ModalFunc>>();
+ const componentUnmounting = useRef(false);
const [ modalProps, setModalProps ] = useState<ModalFuncProps>();
const prevModalProps = usePrevious(modalProps, undefined);
@@ -106,10 +107,21 @@ const useModal = (
}
}, [ extendEventHandler, modalProps, options, prevModalProps ]);
+ /**
+ * Sets componentUnmounting to true only when the parent component is unmounting so that the next
+ * useEffect only runs modalClose on unmount, rather than every time modalClose updates.
+ * The order of these two useEffects matters, this one has to be first.
+ */
+ useEffect(() => {
+ return () => {
+ componentUnmounting.current = true;
+ };
+ }, []);
+
// When the component using the hook unmounts, remove the modal automatically.
useEffect(() => {
return () => {
- modalClose();
+ if (componentUnmounting.current) modalClose();
};
}, [ modalClose ]);
