From 191a52f0e72419af4339e1728c81c501c264d126 Mon Sep 17 00:00:00 2001
From: jpuri <jyotipuri@gmail.com>
Date: Tue, 14 Sep 2021 14:32:13 +0530
Subject: [PATCH] Scroll all inputs into view when clicking Advanced options in
 gas edit modal

---
 .../edit-gas-display/edit-gas-display.component.js    | 11 ++++++++++-
 ui/components/app/edit-gas-display/index.scss         |  5 +++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/ui/components/app/edit-gas-display/edit-gas-display.component.js b/ui/components/app/edit-gas-display/edit-gas-display.component.js
index 07a201117..ff1fa5e68 100644
--- a/ui/components/app/edit-gas-display/edit-gas-display.component.js
+++ b/ui/components/app/edit-gas-display/edit-gas-display.component.js
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
@@ -70,6 +70,8 @@ export default function EditGasDisplay({
   txParamsHaveBeenCustomized,
 }) {
   const t = useContext(I18nContext);
+  const scrollRef = useRef(null);
+
   const isMainnet = useSelector(getIsMainnet);
   const networkAndAccountSupport1559 = useSelector(
     checkNetworkAndAccountSupports1559,
@@ -87,6 +89,12 @@ export default function EditGasDisplay({
     showAdvancedInlineGasIfPossible,
   );
 
+  useLayoutEffect(() => {
+    if (showAdvancedForm && scrollRef.current) {
+      scrollRef.current.scrollIntoView();
+    }
+  }, [showAdvancedForm]);
+
   const dappSuggestedAndTxParamGasFeesAreTheSame = areDappSuggestedAndTxParamGasFeesTheSame(
     transaction,
   );
@@ -285,6 +293,7 @@ export default function EditGasDisplay({
             </button>
           </div>
         )}
+      <div ref={scrollRef} className="edit-gas-display__scroll-bottom" />
     </div>
   );
 }
diff --git a/ui/components/app/edit-gas-display/index.scss b/ui/components/app/edit-gas-display/index.scss
index 2f6c1abf0..d109003ec 100644
--- a/ui/components/app/edit-gas-display/index.scss
+++ b/ui/components/app/edit-gas-display/index.scss
@@ -67,4 +67,9 @@
     position: relative;
     margin-top: 4px;
   }
+
+  &__scroll-bottom {
+    margin-bottom: -20px;
+    margin-top: 20px;
+  }
 }