Fix avatar picker modal: use createPortal to escape animated parent
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import { useState, useRef, useCallback } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useParams, Link, useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useUserCats } from '@/hooks/useCats';
|
||||
@@ -197,7 +198,7 @@ export default function ProfilePage() {
|
||||
|
||||
{modalCatId && <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />}
|
||||
|
||||
{showAvatarPicker && (
|
||||
{showAvatarPicker && createPortal(
|
||||
<div className="fixed inset-0 z-[70] bg-black/30 flex items-center justify-center animate-fade-in" onClick={() => setShowAvatarPicker(false)}>
|
||||
<div className="bg-white rounded-2xl w-full max-w-sm p-5 shadow-xl animate-scale-in mx-4" onClick={e => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
@@ -234,7 +235,8 @@ export default function ProfilePage() {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
|
||||
<input type="file" ref={fileInputRef} onChange={onFileChange} accept="image/*" className="hidden" />
|
||||
|
||||
Reference in New Issue
Block a user