Fix [QuickOpenModal] initial scroll (#5311)

* Fix scrolling to [QuickOpenModal] result item

By delaying it to take Modal Transition timeout into account.

* Omit timeout if delayed opt is false

* [QuickOpenModal] Delay scroll for certain conditions

Delay if modal was just enabled or query did not change.

* fix prettier error

* Fix linting import aliasing exceeding line error

Author: 2007heaven

src/components/QuickOpenModal.js

@@ -96,12 +96,17 @@ export class QuickOpenModal extends Component<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props) {
+    const nowEnabled = !prevProps.enabled && this.props.enabled;
+    const queryChanged = prevProps.query !== this.props.query;
+
     if (this.refs.resultList && this.refs.resultList.refs) {
-      scrollList(this.refs.resultList.refs, this.state.selectedIndex);
+      scrollList(
+        this.refs.resultList.refs,
+        this.state.selectedIndex,
+        nowEnabled || !queryChanged
+      );
     }
 
-    const nowEnabled = !prevProps.enabled && this.props.enabled;
-    const queryChanged = prevProps.query !== this.props.query;
     if (nowEnabled || queryChanged) {
       this.updateResults(this.props.query);
     }

src/components/shared/Modal.js

@@ -20,6 +20,8 @@ type ModalProps = {
   handleClose: () => any
 };
 
+export const transitionTimeout = 175;
+
 export class Modal extends React.Component<ModalProps> {
   onClick = (e: SyntheticEvent<HTMLElement>) => {
     e.stopPropagation();
@@ -59,7 +61,7 @@ export default function Slide({
   handleClose
 }: SlideProps) {
   return (
-    <Transition in={inProp} timeout={175} appear>
+    <Transition in={inProp} timeout={transitionTimeout} appear>
       {(status: TransitionStatus) => (
         <Modal
           status={status}

src/utils/result-list.js

@@ -3,19 +3,30 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 import { isFirefox } from "devtools-config";
+import { transitionTimeout } from "../components/shared/Modal";
 
-function scrollList(resultList, index) {
+function scrollList(resultList, index, delayed = false) {
   if (!resultList.hasOwnProperty(index)) {
     return;
   }
 
   const resultEl = resultList[index];
 
-  if (isFirefox()) {
-    resultEl.scrollIntoView({ block: "center", behavior: "smooth" });
-  } else {
-    chromeScrollList(resultEl, index);
+  const scroll = () => {
+    if (isFirefox()) {
+      resultEl.scrollIntoView({ block: "center", behavior: "smooth" });
+    } else {
+      chromeScrollList(resultEl, index);
+    }
+  };
+
+  if (delayed) {
+    // Wait for Modal Transition timeout before scrolling to resultEl.
+    setTimeout(scroll, transitionTimeout + 10);
+    return;
   }
+
+  scroll();
 }
 
 function chromeScrollList(elem, index) {