Merge pull request #8017 from newrelic/clang/fix-home-search-icon-click

[Home:Search] Fix undefined value when clicking on search icon

src/pages/index.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { navigate } from '@reach/router';
 import { css } from '@emotion/react';
@@ -22,6 +22,8 @@ const HomePage = ({ data }) => {
     allMarkdownRemark: { edges: whatsNewPosts },
   } = data;
 
+  const [searchTerm, setSearchTerm] = useState('');
+
   const { t } = useTranslation();
 
   const mobileBreakpoint = '450px';
@@ -34,8 +36,6 @@ const HomePage = ({ data }) => {
     };
   });
 
-  const searchInputRef = useRef();
-
   return (
     <>
       <h1
@@ -52,11 +52,12 @@ const HomePage = ({ data }) => {
       <SearchInput
         placeholder={t('home.search.placeholder')}
         size={SearchInput.SIZE.LARGE}
-        ref={searchInputRef}
+        value={searchTerm || ''}
         iconName={SearchInput.ICONS.SEARCH}
         isIconClickable
         alignIcon={SearchInput.ICON_ALIGNMENT.RIGHT}
-        onSubmit={() => navigate(`?q=${searchInputRef.current.value}`)}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        onSubmit={() => navigate(`?q=${searchTerm || ''}`)}
         css={css`
           @media screen and (max-width: ${mobileBreakpoint}) {
             margin-bottom: 1rem;