Hide results if input loses focus

package.json

@@ -2,7 +2,7 @@
   "name": "react-search-autocomplete",
   "author": "Reale Roberto Josef Antonio",
   "license": "MIT",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "description": "A search box for React",
   "main": "dist/index.js",
   "scripts": {

src/components/ReactSearchAutocomplete.tsx

@@ -228,6 +228,7 @@ export default function ReactSearchAutocomplete<T>({
           <SearchInput
             searchString={searchString}
             setSearchString={handleSetSearchString}
+            eraseResults={eraseResults}
             autoFocus={autoFocus}
             onFocus={handleOnFocus}
             onClear={onClear}

src/components/SearchInput.tsx

@@ -7,6 +7,7 @@ interface SearchInputProps {
   searchString: string
   setSearchString: ChangeEventHandler<HTMLInputElement>
   setHighlightedItem: Function
+  eraseResults: Function
   autoFocus: boolean
   onFocus: FocusEventHandler<HTMLInputElement>
   onClear: Function
@@ -20,6 +21,7 @@ export default function SearchInput({
   searchString,
   setSearchString,
   setHighlightedItem,
+  eraseResults,
   autoFocus,
   onFocus,
   onClear,
@@ -56,6 +58,7 @@ export default function SearchInput({
         onFocus={handleOnFocus}
         placeholder={placeholder}
         autoFocus={autoFocus}
+        onBlur={() => eraseResults()}
         onKeyDown={(event) => setHighlightedItem({ event })}
         data-test="search-input"
         {...maxLengthProperty}

test/ReactSearchAutocomplete.test.tsx

@@ -787,6 +787,31 @@ describe('<ReactSearchAutocomplete>', () => {
       expect(liElements.length).toBe(1)
       expect(liElements[0].textContent).toBe('We could not find any matching items')
     })
+
+    it('hides results when input loses focus', () => {
+      const { queryByPlaceholderText, container } = render(
+        <>
+          <input type="text" placeholder="anotherInput" />
+          <ReactSearchAutocomplete<Item> {...defaultProps} />
+        </>
+      )
+
+      const inputElement = queryByPlaceholderText(/search/i)
+
+      fireEvent.change(inputElement!, { target: { value: 'v' } })
+
+      proceed()
+
+      let ul = container.getElementsByTagName('ul')[0]
+      expect(ul.getElementsByTagName('li').length).toBe(4)
+      expect(ul.querySelectorAll('.search-icon').length).toBe(4)
+
+      const anotherInput = queryByPlaceholderText(/anotherInput/i)
+
+      fireEvent.click(anotherInput!)
+
+      expect(container.getElementsByTagName('ul').length).toBe(0)
+    })
   })
 
   describe('with items with custom properties property', () => {

test/Results.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import { cleanup, fireEvent, render } from '@testing-library/react'
 import Results, { ResultsProps } from '../src/components/Results'

test/SearchInput.test.tsx

@@ -13,6 +13,7 @@ const defaultProps = {
   placeholder: 'Search',
   setHighlightedItem: () => {},
   setSearchString: () => {},
+  eraseResults: () => {},
   searchString: '',
   onFocus: () => {},
   onBlur: () => {},