fix(modal): event leak for onHidden

This commit is contained in:
Elian Doran
2025-09-28 11:10:39 +03:00
parent 5a56ba2fd5
commit 3f8f05368c

View File

@@ -36,9 +36,9 @@ interface ModalProps {
onSubmit?: () => void; onSubmit?: () => void;
/** Called when the modal is shown. */ /** Called when the modal is shown. */
onShown?: () => void; onShown?: () => void;
/** /**
* Called when the modal is hidden, either via close button, backdrop click or submit. * Called when the modal is hidden, either via close button, backdrop click or submit.
* *
* Here it's generally a good idea to set `show` to false to reflect the actual state of the modal. * Here it's generally a good idea to set `show` to false to reflect the actual state of the modal.
*/ */
onHidden: () => void; onHidden: () => void;
@@ -71,23 +71,25 @@ export default function Modal({ children, className, size, title, header, footer
useEffect(() => { useEffect(() => {
const modalElement = modalRef.current; const modalElement = modalRef.current;
if (!modalElement) { if (!modalElement) return;
return;
}
if (onShown) { if (onShown) {
modalElement.addEventListener("shown.bs.modal", onShown); modalElement.addEventListener("shown.bs.modal", onShown);
} }
modalElement.addEventListener("hidden.bs.modal", () => {
function onModalHidden() {
onHidden(); onHidden();
if (elementToFocus.current && "focus" in elementToFocus.current) { if (elementToFocus.current && "focus" in elementToFocus.current) {
(elementToFocus.current as HTMLElement).focus(); (elementToFocus.current as HTMLElement).focus();
} }
}); }
modalElement.addEventListener("hidden.bs.modal", onModalHidden);
return () => { return () => {
if (onShown) { if (onShown) {
modalElement.removeEventListener("shown.bs.modal", onShown); modalElement.removeEventListener("shown.bs.modal", onShown);
} }
modalElement.removeEventListener("hidden.bs.modal", onHidden); modalElement.removeEventListener("hidden.bs.modal", onModalHidden);
}; };
}, [ onShown, onHidden ]); }, [ onShown, onHidden ]);
@@ -180,4 +182,4 @@ const ModalInner = memo(({ children, footer, footerAlignment, bodyStyle, footerS
)} )}
</> </>
); );
}); });