Fixed page scrolling outside the dialog if there is focus.
This commit is contained in:
parent
540243fa8e
commit
af1f125f1a
@ -25,6 +25,7 @@
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import React from "react";
|
||||
import { isIOS, isMobileOnly, isSafari } from "react-device-detect";
|
||||
|
||||
import { classNames } from "../../../utils";
|
||||
import { DialogSkeleton, DialogAsideSkeleton } from "../../../skeletons";
|
||||
@ -102,6 +103,24 @@ const Modal = ({
|
||||
? (footer?.props as { className?: string })
|
||||
: { className: "" };
|
||||
|
||||
const onTouchMove = () => {
|
||||
const activeElement = document.activeElement;
|
||||
if (activeElement?.tagName === "INPUT") activeElement.blur();
|
||||
};
|
||||
|
||||
const onFocusAction = () => {
|
||||
document.addEventListener("touchmove", onTouchMove);
|
||||
};
|
||||
|
||||
const onBlurAction = () => {
|
||||
document.removeEventListener("touchmove", onTouchMove);
|
||||
};
|
||||
|
||||
const iOSActions =
|
||||
isMobileOnly && isIOS && isSafari
|
||||
? { onFocus: onFocusAction, onBlur: onBlurAction }
|
||||
: {};
|
||||
|
||||
return (
|
||||
<StyledModal
|
||||
id={id}
|
||||
@ -194,6 +213,7 @@ const Modal = ({
|
||||
hasFooter={!!footer}
|
||||
currentDisplayType={currentDisplayType}
|
||||
{...bodyProps}
|
||||
{...iOSActions}
|
||||
// embedded={embedded}
|
||||
>
|
||||
{currentDisplayType === "aside" && withBodyScroll ? (
|
||||
|
Loading…
Reference in New Issue
Block a user