Update method for accessing list node ref in tag picker to make linte…

…r happy
guardian · Dec 10, 2024 · 65dddf3 · 65dddf3
1 parent fd304e3
commit 65dddf3
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/public/video-ui/src/components/CapiSearch/CapiSearch.jsx b/public/video-ui/src/components/CapiSearch/CapiSearch.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 class CapiSearch extends React.Component {
   constructor(props) {
     super(props);
+    this.listNode = React.createRef();
   }
 
   componentDidUpdate(prevProps) {
@@ -12,9 +13,10 @@ class CapiSearch extends React.Component {
       nextProps.selectedTagIndex !== null &&
       prevProps.selectedTagIndex !== nextProps.selectedTagIndex
     ) {
-      const listNode = this.refs.list;
-      const elementHeight = listNode.children[0].offsetHeight;
-      if (listNode) {
+      const listNode = this.listNode.current;
+      if (listNode && listNode.children && listNode.children[0]) {
+        const elementHeight = listNode.children[0].offsetHeight;
+
         listNode.scrollTop =
           elementHeight *
           (nextProps.selectedTagIndex === 0
@@ -62,7 +64,7 @@ class CapiSearch extends React.Component {
     if (this.props.capiTags.length !== 0 && this.props.showTags) {
       return (
         <ul
-          ref="list"
+          ref={this.listNode}
           className="form__field__tags"
           onMouseDown={this.props.tagsToVisible}
         >