From ef3333548262d41351ed6ac4dd63856dcd4629d9 Mon Sep 17 00:00:00 2001 From: Artem Lukashenko Date: Fri, 11 Aug 2023 23:08:45 +0300 Subject: [PATCH] fix: #4759 bad behaviour of Dialog component (#4760) * fix: fix bad behaviour of Dialog component * Update components/lib/dialog/Dialog.js * Update Dialog.js * Update Dialog.js --------- Co-authored-by: Melloware --- components/lib/dialog/Dialog.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js index 23de891576..f2e8faeffb 100644 --- a/components/lib/dialog/Dialog.js +++ b/components/lib/dialog/Dialog.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import { useOnEscapeKey } from '../../lib/hooks/Hooks'; import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; @@ -10,7 +11,6 @@ import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, mergeProps } from '../utils/Utils'; import { DialogBase } from './DialogBase'; -import { useOnEscapeKey } from '../../lib/hooks/Hooks'; export const Dialog = React.forwardRef((inProps, ref) => { const context = React.useContext(PrimeReactContext); @@ -174,24 +174,27 @@ export const Dialog = React.forwardRef((inProps, ref) => { const leftPos = offset.left + deltaX; const topPos = offset.top + deltaY; const viewport = DomHandler.getViewport(); + const computedStyle = getComputedStyle(dialogRef.current); + const leftMargin = parseFloat(computedStyle.marginLeft); + const topMargin = parseFloat(computedStyle.marginTop); dialogRef.current.style.position = 'fixed'; if (props.keepInViewport) { if (leftPos >= props.minX && leftPos + width < viewport.width) { lastPageX.current = event.pageX; - dialogRef.current.style.left = leftPos + 'px'; + dialogRef.current.style.left = leftPos - leftMargin + 'px'; } if (topPos >= props.minY && topPos + height < viewport.height) { lastPageY.current = event.pageY; - dialogRef.current.style.top = topPos + 'px'; + dialogRef.current.style.top = topPos - topMargin + 'px'; } } else { lastPageX.current = event.pageX; - dialogRef.current.style.left = leftPos + 'px'; + dialogRef.current.style.left = leftPos - leftMargin + 'px'; lastPageY.current = event.pageY; - dialogRef.current.style.top = topPos + 'px'; + dialogRef.current.style.top = topPos - topMargin + 'px'; } props.onDrag && props.onDrag(event);