fix(cf-modal): portal to body + auto-close on parcel switch
Two related issues with the modal when the user kept clicking around the map while in CF order mode: 1. LAYOUT BREAK (Marius screenshot — modal header clipped above viewport): The V2 panel wrapper uses `backdrop-blur-md`. Per CSS spec, an element with non-none backdrop-filter establishes a containing block for `fixed`-positioned descendants. So `fixed inset-0` on the modal was relative to the panel (top-right, ~50px tall at min) instead of the viewport — the modal anchored to the panel and overflowed up. Fix: render via React's createPortal to document.body. The modal now escapes the panel's stacking context entirely and centers in the viewport. Also bumped z-index from 50 to 100 so the modal stays above the MapLibre canvas + panel itself. 2. STATE CARRY-OVER: clicking a different parcel while the modal was open silently re-targeted the modal at the new parcel — same modal showing different cadref/sold mid-flow could mislead the user about which parcel they were buying CF for. Fix: FeatureInfoPanel now has a useEffect that closes the modal when feature.cadastralRef / siruta / layerId changes. Modal stays scoped to a single decision. SSR guard: if (typeof document === "undefined") return null; before the portal call so the modal doesn't blow up during server-side render. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -406,6 +406,13 @@ export function FeatureInfoPanel({ feature, onClose, onSelectFeature, basic = fa
|
||||
const [condoLoading, setCondoLoading] = useState(false);
|
||||
const [cfModalOpen, setCfModalOpen] = useState(false);
|
||||
|
||||
// Close the CF modal whenever the user switches to a different
|
||||
// parcel — keeps the modal scoped to a single decision instead of
|
||||
// silently re-targeting mid-flight.
|
||||
useEffect(() => {
|
||||
setCfModalOpen(false);
|
||||
}, [feature.cadastralRef, feature.siruta, feature.layerId]);
|
||||
|
||||
const authRetriedRef = useRef<boolean>(
|
||||
typeof window !== "undefined" &&
|
||||
sessionStorage.getItem(AUTH_RETRY_KEY) === "1",
|
||||
|
||||
Reference in New Issue
Block a user