Admin/Todo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix modal closing immediately by preventing event propagation

Browse Source
This commit is contained in:
Paul Bailey
2025-12-03 20:00:13 +00:00
parent 6c5f2fbc1e
commit 5545caa1c3
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/Modal.tsx
View File

@@ -42,15 +42,20 @@ export default function Modal({ isOpen, onClose, title, children }: ModalProps)
if (!isOpen) return null if (!isOpen) return null
return ( return (
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center animate-fade-in"> <div
className="fixed inset-0 z-50 flex items-end sm:items-center justify-center animate-fade-in"
onClick={onClose}
>
{/* Backdrop */} {/* Backdrop */}
<div <div
className="absolute inset-0 bg-black bg-opacity-50 transition-opacity backdrop-blur-sm" className="absolute inset-0 bg-black bg-opacity-50 transition-opacity backdrop-blur-sm"
onClick={onClose}
/> />
{/* Modal */} {/* Modal */}
<div className="relative bg-white rounded-t-2xl sm:rounded-lg shadow-xl max-w-md w-full mx-0 sm:mx-4 max-h-[90vh] overflow-y-auto transform transition-transform animate-scale-in"> <div
className="relative bg-white rounded-t-2xl sm:rounded-lg shadow-xl max-w-md w-full mx-0 sm:mx-4 max-h-[90vh] overflow-y-auto transform transition-transform animate-scale-in"
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-between p-4 sm:p-5 border-b border-gray-200 sticky top-0 bg-white z-10"> <div className="flex items-center justify-between p-4 sm:p-5 border-b border-gray-200 sticky top-0 bg-white z-10">
<h2 className="text-lg sm:text-xl font-semibold text-gray-900">{title}</h2> <h2 className="text-lg sm:text-xl font-semibold text-gray-900">{title}</h2>
<button <button