Merge pull request #2464 from SUI-Components/fix/#2463-onblur-not-cal…

…led-after-typing

fix(components/molecule/autosuggest): call on blur after typing

components/molecule/autosuggest/src/index.js

@@ -163,8 +163,8 @@ const MoleculeAutosuggest = ({
           closeList(ev)
         } else {
           setFocus(false)
-          typeof onBlur === 'function' && onBlur()
         }
+        typeof onBlur === 'function' && onBlur()
       }
     }, 1)
     setFocus(true)

components/molecule/autosuggest/test/index.test.js

@@ -12,7 +12,7 @@ import chai, {expect} from 'chai'
 import chaiDOM from 'chai-dom'
 import sinon from 'sinon'
 
-import {fireEvent} from '@testing-library/react'
+import {fireEvent, waitFor} from '@testing-library/react'
 
 import MoleculeDropDownOption from '@s-ui/react-molecule-dropdown-option'
 
@@ -418,6 +418,43 @@ describe(json.name, () => {
           })
         })
       })
+      describe('onBlur', () => {
+        it('should call onBlur handler when clicking outside', async () => {
+          const onBlurSpy = sinon.spy()
+
+          const props = {
+            onBlur: onBlurSpy
+          }
+
+          const {getByRole} = setup(props)
+
+          const $textBox = getByRole('textbox')
+
+          $textBox.focus()
+          $textBox.blur()
+
+          await waitFor(() => expect(sinon.assert.called(onBlurSpy)))
+        })
+
+        it('should call onBlur handler when clicking outside after input a text', async () => {
+          const onBlurSpy = sinon.spy()
+
+          const props = {
+            onBlur: onBlurSpy
+          }
+
+          const {getByRole} = setup(props)
+          const $textBox = getByRole('textbox')
+          const changeEvent = {target: {value: 'asdf'}}
+
+          fireEvent.change(getByRole('textbox'), changeEvent)
+
+          $textBox.focus()
+          $textBox.blur()
+
+          await waitFor(() => expect(sinon.assert.called(onBlurSpy)))
+        })
+      })
     })
   })