From 3511365eefd5170fe35704006ab177757d30ae23 Mon Sep 17 00:00:00 2001
From: Reale Roberto Josef Antonio <roberto.reale.ja@gmail.com>
Date: Sat, 11 Mar 2023 10:21:55 +0900
Subject: [PATCH] Hide results if input loses focus

---
 package.json                               |  2 +-
 src/components/ReactSearchAutocomplete.tsx |  1 +
 src/components/SearchInput.tsx             |  3 +++
 test/ReactSearchAutocomplete.test.tsx      | 25 ++++++++++++++++++++++
 test/Results.test.tsx                      |  1 +
 test/SearchInput.test.tsx                  |  1 +
 6 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4e30d6b..0125b23 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/ReactSearchAutocomplete.tsx b/src/components/ReactSearchAutocomplete.tsx
index 3748aa1..5a30acc 100644
--- a/src/components/ReactSearchAutocomplete.tsx
+++ b/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}
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index 5da0505..e0c3a0b 100644
--- a/src/components/SearchInput.tsx
+++ b/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}
diff --git a/test/ReactSearchAutocomplete.test.tsx b/test/ReactSearchAutocomplete.test.tsx
index 73d2470..d697844 100644
--- a/test/ReactSearchAutocomplete.test.tsx
+++ b/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', () => {
diff --git a/test/Results.test.tsx b/test/Results.test.tsx
index f4192bb..f82bfab 100644
--- a/test/Results.test.tsx
+++ b/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'
diff --git a/test/SearchInput.test.tsx b/test/SearchInput.test.tsx
index ec49446..d905db5 100644
--- a/test/SearchInput.test.tsx
+++ b/test/SearchInput.test.tsx
@@ -13,6 +13,7 @@ const defaultProps = {
   placeholder: 'Search',
   setHighlightedItem: () => {},
   setSearchString: () => {},
+  eraseResults: () => {},
   searchString: '',
   onFocus: () => {},
   onBlur: () => {},