Bug 1862022 - [devtools] Fix the scroll issue in the quickopen panel r=devtools-reviewers,nchevobbe

This fixes the issue allowing the result list to scroll as the user presses the up/down to move through
the list items. Seperating this patch from the test (as the test is quite tricky), so we can land the fix.

Differential Revision: https://phabricator.services.mozilla.com/D193721

devtools/client/debugger/src/components/QuickOpenModal.js

@@ -24,7 +24,6 @@ import {
   getProjectDirectoryRoot,
 } from "../selectors";
 import { memoizeLast } from "../utils/memoizeLast";
-import { scrollList } from "../utils/result-list";
 import { searchKeys } from "../constants";
 import {
   formatSymbol,
@@ -110,10 +109,6 @@ export class QuickOpenModal extends Component {
   componentDidUpdate(prevProps) {
     const queryChanged = prevProps.query !== this.props.query;
 
-    if (this.refs.resultList && this.refs.resultList.refs) {
-      scrollList(this.refs.resultList.refs, this.state.selectedIndex);
-    }
-
     if (queryChanged) {
       this.updateResults(this.props.query);
     }

devtools/client/debugger/src/components/shared/ResultList.js

@@ -10,6 +10,8 @@ import AccessibleImage from "./AccessibleImage";
 
 const classnames = require("devtools/client/shared/classnames.js");
 
+import { scrollList } from "../../utils/result-list";
+
 import "./ResultList.css";
 
 export default class ResultList extends Component {
@@ -28,6 +30,17 @@ export default class ResultList extends Component {
     };
   }
 
+  constructor(props) {
+    super(props);
+    this.ref = React.createRef();
+  }
+
+  componentDidUpdate() {
+    if (this.ref.current.childNodes) {
+      scrollList(this.ref.current.childNodes, this.props.selected);
+    }
+  }
+
   renderListItem = (item, index) => {
     if (item.value === "/" && item.title === "") {
       item.title = "(index)";
@@ -37,7 +50,6 @@ export default class ResultList extends Component {
     const props = {
       onClick: event => selectItem(event, item, index),
       key: `${item.id}${item.value}${index}`,
-      ref: React.createRef(),
       title: item.value,
       "aria-labelledby": `${item.id}-title`,
       "aria-describedby": `${item.id}-subtitle`,
@@ -80,6 +92,7 @@ export default class ResultList extends Component {
     const { size, items, role } = this.props;
     return ul(
       {
+        ref: this.ref,
         className: classnames("result-list", size),
         id: "result-list",
         role: role,