Fix popover hiding (#18843)

* Fix popover hiding

* Fix popover hiding

* Add debounce to scroll event

---------

Co-authored-by: David Walsh <davidwalsh83@gmail.com>

ui/components/app/terms-of-use-popup/terms-of-use-popup.js

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
+import { debounce } from 'lodash';
 import { I18nContext } from '../../../contexts/i18n';
 import Popover from '../../ui/popover';
 import {
@@ -28,6 +29,7 @@ export default function TermsOfUsePopup({ onAccept }) {
   const t = useContext(I18nContext);
   const trackEvent = useContext(MetaMetricsContext);
   const [isTermsOfUseChecked, setIsTermsOfUseChecked] = useState(false);
+  const [shouldShowScrollButton, setShouldShowScrollButton] = useState(true);
 
   const popoverRef = useRef();
   const bottomRef = React.createRef();
@@ -39,6 +41,16 @@ export default function TermsOfUsePopup({ onAccept }) {
     });
   };
 
+  const handleDebouncedScroll = debounce((target) => {
+    setShouldShowScrollButton(
+      target.scrollHeight - target.scrollTop !== target.clientHeight,
+    );
+  }, 100);
+
+  const handleScroll = (e) => {
+    handleDebouncedScroll(e.target);
+  };
+
   useEffect(() => {
     trackEvent({
       category: MetaMetricsEventCategory.Onboarding,
@@ -54,8 +66,9 @@ export default function TermsOfUsePopup({ onAccept }) {
     <Popover
       className="terms-of-use__popover"
       popoverRef={popoverRef}
+      onScroll={handleScroll}
+      showScrollDown={shouldShowScrollButton}
       title={t('termsOfUseTitle')}
-      showScrollDown
       onScrollDownButtonClick={handleScrollDownClick}
       footerProps={{
         justifyContent: AlignItems.center,

ui/components/ui/popover/popover.component.js

@@ -57,6 +57,7 @@ const Popover = ({
   footerClassName,
   onBack,
   onClose,
+  onScroll,
   className,
   contentClassName,
   showArrow,
@@ -133,6 +134,7 @@ const Popover = ({
         {children ? (
           <Box
             className={classnames('popover-content', contentClassName)}
+            onScroll={onScroll}
             {...{ ...defaultContentProps, ...contentProps }}
           >
             {children}
@@ -201,6 +203,10 @@ Popover.propTypes = {
    * onClose handler
    */
   onClose: PropTypes.func,
+  /**
+   * onScroll handler
+   */
+  onScroll: PropTypes.func,
   CustomBackground: PropTypes.func,
   /**
    * Add custom CSS class for content