Merge branch '267-clear-button-does-not-clear-the-search-bar' into 'development'

Resolve "Clear button does not clear the search bar"

Closes #267

See merge request !205

src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx

@@ -66,17 +66,6 @@ describe('SearchBar - component', () => {
     expect(input).toBeDisabled();
   });
 
-  it('should set initial search value to match searchValue query param', () => {
-    (useRouter as jest.Mock).mockReturnValue({
-      query: { searchValue: 'aspirin;nadh' },
-    });
-    renderComponent();
-
-    const input = screen.getByTestId<HTMLInputElement>('search-input');
-
-    expect(input.value).toBe('aspirin;nadh');
-  });
-
   it('should change selected search element when user search another', () => {
     const { store } = renderComponent();
     const input = screen.getByTestId<HTMLInputElement>('search-input');

src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx

-import lensIcon from '@/assets/vectors/icons/lens.svg';
 import {
   currentSelectedSearchElement,
   searchDrawerOpenSelector,
 } from '@/redux/drawer/drawer.selectors';
+import lensIcon from '@/assets/vectors/icons/lens.svg';
 import { openSearchDrawerWithSelectedTab, selectTab } from '@/redux/drawer/drawer.slice';
 import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { resetReactionsData } from '@/redux/reactions/reactions.slice';
 import {
   isPendingSearchStatusSelector,
   perfectMatchSelector,
+  searchValueSelector,
 } from '@/redux/search/search.selectors';
 import { getSearchData } from '@/redux/search/search.thunks';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import { ONE, ZERO } from '@/constants/common';
 import { getDefaultSearchTab, getSearchValuesArrayAndTrimToSeven } from './SearchBar.utils';
 
 const ENTER_KEY_CODE = 'Enter';
@@ -24,6 +26,7 @@ export const SearchBar = (): JSX.Element => {
   const isPendingSearchStatus = useSelector(isPendingSearchStatusSelector);
   const isSearchDrawerOpen = useSelector(searchDrawerOpenSelector);
   const isPerfectMatch = useSelector(perfectMatchSelector);
+  const searchValueState = useSelector(searchValueSelector);
   const currentTab = useSelector(currentSelectedSearchElement);
   const dispatch = useAppDispatch();
   const router = useRouter();
@@ -31,10 +34,20 @@ export const SearchBar = (): JSX.Element => {
   const updateSearchValueFromQueryParam = useCallback((): void => {
     const { searchValue: searchValueQueryParam } = router.query;
     if (typeof searchValueQueryParam === 'string') {
+      // eslint-disable-next-line no-console
+      console.log('y');
       setSearchValue(searchValueQueryParam);
     }
   }, [router.query]);
 
+  const clearSearchValueFromClearedState = useCallback((): void => {
+    if (searchValueState.length === ONE && searchValueState[ZERO] === '') {
+      // eslint-disable-next-line no-console
+      console.log('x');
+      setSearchValue('');
+    }
+  }, [searchValueState]);
+
   const openSearchDrawerIfClosed = (defaultSearchTab: string): void => {
     if (!isSearchDrawerOpen) {
       dispatch(openSearchDrawerWithSelectedTab(defaultSearchTab));
@@ -74,6 +87,9 @@ export const SearchBar = (): JSX.Element => {
   useEffect(() => {
     updateSearchValueFromQueryParam();
   }, [updateSearchValueFromQueryParam]);
+  useEffect(() => {
+    clearSearchValueFromClearedState();
+  }, [clearSearchValueFromClearedState]);
 
   return (
     <div className="relative" data-testid="search-bar">