From 65dddf3019e113f8cc91da57a9e0f7d6e14c54c8 Mon Sep 17 00:00:00 2001
From: Rhys Mills <rhys.mills@guardian.co.uk>
Date: Tue, 10 Dec 2024 10:40:48 +0000
Subject: [PATCH] Update method for accessing list node ref in tag picker to
 make linter happy

---
 .../video-ui/src/components/CapiSearch/CapiSearch.jsx  | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/public/video-ui/src/components/CapiSearch/CapiSearch.jsx b/public/video-ui/src/components/CapiSearch/CapiSearch.jsx
index 2fe33bf69..bfa965431 100644
--- 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}
         >