fix(tradein): MapPicker через portal в document.body (z-index конфликт)
MapPicker (position:fixed; z-index:1000) монтировался внутри subtree формы, где sticky-предок (z-index:50) создаёт stacking-context → оверлей был заперт и полоски SourcesProgress наезжали сверху. Рендерим оверлей через createPortal в document.body — escape всех ancestor stacking-context'ов. SSR-mounted guard. Refs #771
This commit is contained in:
parent
238f14a0d7
commit
52db40cc40
1 changed files with 11 additions and 2 deletions
|
|
@ -3,6 +3,7 @@
|
||||||
/* Выбор адреса на карте ЕКБ (Leaflet + OSM). Клик по дому → reverse-геокодинг. */
|
/* Выбор адреса на карте ЕКБ (Leaflet + OSM). Клик по дому → reverse-геокодинг. */
|
||||||
/* eslint-disable @typescript-eslint/no-explicit-any -- интероп с CDN-библиотекой Leaflet */
|
/* eslint-disable @typescript-eslint/no-explicit-any -- интероп с CDN-библиотекой Leaflet */
|
||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import { createPortal } from "react-dom";
|
||||||
|
|
||||||
import { API_BASE_URL } from "@/lib/api";
|
import { API_BASE_URL } from "@/lib/api";
|
||||||
|
|
||||||
|
|
@ -98,6 +99,11 @@ export function MapPicker({ onPick, onClose }: Props) {
|
||||||
// тонкий hint «Точка дома по Яндексу», чтобы user понимал почему marker
|
// тонкий hint «Точка дома по Яндексу», чтобы user понимал почему marker
|
||||||
// переехал на пару метров от его клика.
|
// переехал на пару метров от его клика.
|
||||||
const [snapped, setSnapped] = useState(false);
|
const [snapped, setSnapped] = useState(false);
|
||||||
|
// Portal-mount guard (SSR-safe): document доступен только после монтирования.
|
||||||
|
// Рендерим оверлей в document.body, чтобы position:fixed/z-index:1000 не были
|
||||||
|
// заперты в stacking-context формы (#771: полоски SourcesProgress наезжали).
|
||||||
|
const [mounted, setMounted] = useState(false);
|
||||||
|
useEffect(() => setMounted(true), []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let map: any = null;
|
let map: any = null;
|
||||||
|
|
@ -212,7 +218,9 @@ export function MapPicker({ onPick, onClose }: Props) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
if (!mounted) return null;
|
||||||
|
|
||||||
|
return createPortal(
|
||||||
<div
|
<div
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
style={{
|
style={{
|
||||||
|
|
@ -316,6 +324,7 @@ export function MapPicker({ onPick, onClose }: Props) {
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>,
|
||||||
|
document.body,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue