Fix primefaces#4819: Overlay handling better handling of alignment wi…

…th browser changes
melloware · Aug 24, 2023 · 1104944 · 1104944
1 parent 4970f44
commit 1104944
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/components/lib/hooks/useOverlayListener.js b/components/lib/hooks/useOverlayListener.js
@@ -17,12 +17,14 @@ export const useOverlayListener = ({ target, overlay, listener, when = true }) =
      * @param {boolean} options.valid It is controlled by PrimeReact. It is determined whether it is valid or not according to some custom validation.
      */
     const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({
+        target: 'window',
         type: 'click',
         listener: (event) => {
             listener && listener(event, { type: 'outside', valid: event.which !== 3 && isOutsideClicked(event) });
         }
     });
     const [bindWindowResizeListener, unbindWindowResizeListener] = useResizeListener({
+        target: 'window',
         listener: (event) => {
             listener && listener(event, { type: 'resize', valid: !DomHandler.isTouchDevice() });
         }
@@ -34,6 +36,13 @@ export const useOverlayListener = ({ target, overlay, listener, when = true }) =
             listener && listener(event, { type: 'orientationchange', valid: true });
         }
     });
+    const [bindWindowScrollChangeListener, unbindWindowScrollChangeListener] = useEventListener({
+        target: 'window',
+        type: 'scroll',
+        listener: (event) => {
+            listener && listener(event, { type: 'scroll', valid: true });
+        }
+    });
     const [bindOverlayScrollListener, unbindOverlayScrollListener] = useOverlayScrollListener({
         target,
         listener: (event) => {
@@ -49,13 +58,15 @@ export const useOverlayListener = ({ target, overlay, listener, when = true }) =
         bindDocumentClickListener();
         bindWindowResizeListener();
         bindWindowOrientationChangeListener();
+        bindWindowScrollChangeListener();
         bindOverlayScrollListener();
     };
 
     const unbind = () => {
         unbindDocumentClickListener();
         unbindWindowResizeListener();
         unbindWindowOrientationChangeListener();
+        unbindWindowScrollChangeListener();
         unbindOverlayScrollListener();
     };
 

diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.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';
@@ -9,7 +10,6 @@ import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
 import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils, mergeProps } from '../utils/Utils';
 import { OverlayPanelBase } from './OverlayPanelBase';
-import { useOnEscapeKey } from '../../lib/hooks/Hooks';
 
 export const OverlayPanel = React.forwardRef((inProps, ref) => {
     const context = React.useContext(PrimeReactContext);
@@ -37,7 +37,16 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
         overlay: overlayRef,
         listener: (event, { type, valid }) => {
             if (valid) {
-                type === 'outside' ? props.dismissable && !isPanelClicked.current && hide() : hide();
+                switch (type) {
+                    case 'outside':
+                        props.dismissable ? !isPanelClicked.current && hide() : hide();
+                        break;
+                    case 'resize':
+                    case 'scroll':
+                    case 'orientationchange':
+                        align();
+                        break;
+                }
             }
 
             isPanelClicked.current = false;
@@ -154,7 +163,10 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
 
             if (containerOffset.top < targetOffset.top) {
                 overlayRef.current.setAttribute('data-p-overlaypanel-flipped', 'true');
-                !isUnstyled && DomHandler.addClass(overlayRef.current, 'p-overlaypanel-flipped');
+                isUnstyled && DomHandler.addClass(overlayRef.current, 'p-overlaypanel-flipped');
+            } else {
+                overlayRef.current.setAttribute('data-p-overlaypanel-flipped', 'false');
+                isUnstyled && DomHandler.removeClass(overlayRef.current, 'p-overlaypanel-flipped');
             }
         }
     };
@@ -203,6 +215,7 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
         toggle,
         show,
         hide,
+        align,
         getElement: () => overlayRef.current
     }));
 

diff --git a/components/lib/overlaypanel/overlaypanel.d.ts b/components/lib/overlaypanel/overlaypanel.d.ts
@@ -160,6 +160,10 @@ export declare class OverlayPanel extends React.Component<OverlayPanelProps, any
      * Hides the overlay.
      */
     public hide(): void;
+    /**
+     * Align the overlay panel to its surroundings.
+     */
+    public align(): void;
     /**
      * Used to get container element.
      * @return {HTMLDivElement} Container element