Fix #4505: ScrollTop not mounting (#4507)

primefaces · Jun 13, 2023 · 4f26f87 · 4f26f87
1 parent e5cf0d6
commit 4f26f87
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/components/lib/hooks/useEventListener.js b/components/lib/hooks/useEventListener.js
@@ -7,6 +7,7 @@ import { useUnmountEffect } from './useUnmountEffect';
 export const useEventListener = ({ target = 'document', type, listener, options, when = true }) => {
     const targetRef = React.useRef(null);
     const listenerRef = React.useRef(null);
+    const prevListener = usePrevious(listener);
     const prevOptions = usePrevious(options);
 
     const bind = (bindOptions = {}) => {
@@ -38,11 +39,12 @@ export const useEventListener = ({ target = 'document', type, listener, options,
     }, [target, when]);
 
     React.useEffect(() => {
-        if (listenerRef.current && (listenerRef.current !== listener || prevOptions !== options)) {
+        // to properly compare functions we can implicitly converting the function to it's body's text as a String
+        if (listenerRef.current && ('' + prevListener !== '' + listener || prevOptions !== options)) {
             unbind();
             when && bind();
         }
-    }, [listener, options]);
+    }, [listener, options, when]);
 
     useUnmountEffect(() => {
         unbind();

diff --git a/components/lib/scrolltop/ScrollTop.js b/components/lib/scrolltop/ScrollTop.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/context';
 import { CSSTransition } from '../csstransition/CSSTransition';
-import { useEventListener, useMountEffect, useUnmountEffect } from '../hooks/Hooks';
+import { useEventListener, useUnmountEffect } from '../hooks/Hooks';
 import { ChevronUpIcon } from '../icons/chevronup';
 import { Ripple } from '../ripple/Ripple';
 import { DomHandler, IconUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
@@ -34,8 +34,8 @@ export const ScrollTop = React.memo(
         const [bindDocumentScrollListener] = useEventListener({
             target: 'window',
             type: 'scroll',
-            listener: () => {
-                checkVisibility(DomHandler.getWindowScrollTop());
+            listener: (event) => {
+                event && checkVisibility(DomHandler.getWindowScrollTop());
             }
         });
 
@@ -71,10 +71,10 @@ export const ScrollTop = React.memo(
             getElement: () => elementRef.current
         }));
 
-        useMountEffect(() => {
+        React.useEffect(() => {
             if (props.target === 'window') bindDocumentScrollListener();
             else if (props.target === 'parent') bindParentScrollListener();
-        });
+        }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
         useUnmountEffect(() => {
             ZIndexUtils.clear(scrollElementRef.current);