From 9a583635c206677e108d11a3d59d8b26bcc22f9d Mon Sep 17 00:00:00 2001
From: Dominik Rudzki <dominikrudzki2000@gmail.com>
Date: Wed, 3 May 2023 20:32:29 +0200
Subject: [PATCH] Fix popover hiding (#18843)

* Fix popover hiding

* Fix popover hiding

* Add debounce to scroll event

---------

Co-authored-by: David Walsh <davidwalsh83@gmail.com>
---
 .../app/terms-of-use-popup/terms-of-use-popup.js  | 15 ++++++++++++++-
 ui/components/ui/popover/popover.component.js     |  6 ++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/ui/components/app/terms-of-use-popup/terms-of-use-popup.js b/ui/components/app/terms-of-use-popup/terms-of-use-popup.js
index 5d1da7fd1..1b8097a70 100644
--- a/ui/components/app/terms-of-use-popup/terms-of-use-popup.js
+++ b/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,
diff --git a/ui/components/ui/popover/popover.component.js b/ui/components/ui/popover/popover.component.js
index c5b073d86..f843fcb0a 100644
--- a/ui/components/ui/popover/popover.component.js
+++ b/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