Модальный замораживание Nextjs ⇐ Javascript

[Anonymous]

испытываю эту проблему на мобильном сафари, где, когда модал открывается, и я выбираю из любого поля ввода, которое запускает клавиатуру, на клавиатуре закрыть всю модальную заморозку, при котором ничто не может щелкнуть. /> modal.tsx
import React, { HTMLAttributes, useEffect } from "react";
import ReactDOM from "react-dom";
import Overlay from "./Overlay";

export interface ModalProps extends HTMLAttributes {
isOpen: boolean;
pixelUp?: number;
title?: string | any;
bottomPadding?: string;
contentCentered?: boolean;
children?: any;
modalClassName?: string;
zIndex?: number;
}

const Modal = ({
isOpen,
pixelUp = 0,
title = "",
bottomPadding = "pb-0",
contentCentered = false,
modalClassName = "",
zIndex = 50,
...props
}: ModalProps) => {
useEffect(() => {
if (isOpen) {
const scrollY = window.scrollY;
document.body.style.position = "fixed";
document.body.style.top = `-${scrollY}px`;
document.body.style.width = "100%";
document.body.style.overflow = "hidden";
return () => {
document.body.style.position = "";
document.body.style.top = "";
document.body.style.width = "";
document.body.style.overflow = "";
window.scrollTo(0, scrollY);
};
}
}, [isOpen]);

if (!isOpen) return null;

const { className, children, ...restProps } = props;

return ReactDOM.createPortal(

className={`fixed inset-0 flex items-center justify-center pointer-events-none`}
style={{ zIndex }} // keep the z-index prop working
>
{/* Must be 75vh for roster form height fix */}

{title ? {title} : }

{children}



,
document.body
);
};

export default Modal;

overlay.tsx

const Overlay = ({ children = null }) => {
return (
className="fixed inset-0 bg-black bg-opacity-50 z-50"
style={{ touchAction: 'none', overscrollBehavior: 'none' }}
>
{children}

);
}

export default Overlay;


Подробнее здесь: https://stackoverflow.com/questions/796 ... eze-nextjs