Fixed passed onBlur & onFocus being ignored on Search component (#331)

* Fixed passed onBlur & onFocus being ignored * Added onBlur/onFocus to story * Updated test with onBlur & onFocus
equinor · May 28, 2020 · 80df497 · 80df497
1 parent f26a1d6
commit 80df497
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 3 deletions.
diff --git a/apps/storybook-react/stories/Search.stories.jsx b/apps/storybook-react/stories/Search.stories.jsx
@@ -30,6 +30,8 @@ export default {
 }
 
 const handleOnChange = action('onChange')
+const handleOnBlur = action('onBlur')
+const handleOnFocus = action('onFocus')
 
 export const Examples = () => (
   <div>
@@ -40,6 +42,8 @@ export const Examples = () => (
         id="search-normal"
         placeholder="Search"
         onChange={handleOnChange}
+        onFocus={handleOnFocus}
+        onBlur={handleOnBlur}
       />
     </Wrapper>
     <Wrapper>
@@ -49,6 +53,8 @@ export const Examples = () => (
         id="search-predefined"
         placeholder="Search"
         onChange={handleOnChange}
+        onFocus={handleOnFocus}
+        onBlur={handleOnBlur}
         value="Predefined value"
       />
     </Wrapper>
@@ -61,6 +67,8 @@ export const Examples = () => (
           id="search-contained"
           placeholder="Search"
           onChange={handleOnChange}
+          onFocus={handleOnFocus}
+          onBlur={handleOnBlur}
         />
       </OuterContainer>
     </Wrapper>
@@ -77,6 +85,8 @@ export const Examples = () => (
         id="search-disabled"
         placeholder="Search"
         onChange={handleOnChange}
+        onFocus={handleOnFocus}
+        onBlur={handleOnBlur}
         disabled
       />
     </Wrapper>

diff --git a/libraries/core-react/src/Search/Search.jsx b/libraries/core-react/src/Search/Search.jsx
@@ -162,7 +162,7 @@ const InsideButton = styled.div`
 `
 
 export const Search = React.forwardRef(function EdsSearch(
-  { onChange, value: initValue, className, disabled, ...rest },
+  { onChange, value: initValue, className, disabled, onBlur, onFocus, ...rest },
   ref,
 ) {
   const inputRef = useCombinedRefs(useRef(null), ref)
@@ -204,8 +204,18 @@ export const Search = React.forwardRef(function EdsSearch(
     type: 'search',
     role: 'searchbox',
     'aria-label': 'search input',
-    onBlur: handleBlur,
-    onFocus: handleFocus,
+    onBlur: (e) => {
+      handleBlur(e)
+      if (onBlur) {
+        onBlur(e)
+      }
+    },
+    onFocus: (e) => {
+      handleFocus(e)
+      if (onFocus) {
+        onFocus(e)
+      }
+    },
     onChange: (e) => {
       handleOnChange(e)
       if (onChange) {
@@ -248,6 +258,10 @@ Search.propTypes = {
   onChange: PropTypes.func,
   /** Value for search field */
   value: PropTypes.string,
+  /** onBlur handler */
+  onBlur: PropTypes.func,
+  /** onFocus handler */
+  onFocus: PropTypes.func,
 }
 
 Search.defaultProps = {
@@ -256,6 +270,8 @@ Search.defaultProps = {
   disabled: false,
   onChange: undefined,
   value: '',
+  onBlur: undefined,
+  onFocus: undefined,
 }
 
 Search.displayName = 'eds-search'
diff --git a/libraries/core-react/src/Search/Search.test.jsx b/libraries/core-react/src/Search/Search.test.jsx
@@ -72,4 +72,35 @@ describe('Search', () => {
     expect(callbackValue).toEqual('')
     expect(callbackId).toEqual(searchId)
   })
+
+  it('Has called onFocus when search if focused', () => {
+    const searchId = 'search-id-when-testing'
+    let callbackId = ''
+    const handleOnFocus = jest.fn(({ target: { id } }) => {
+      callbackId = id
+    })
+
+    render(<Search id={searchId} onFocus={handleOnFocus} />)
+    const searchBox = screen.queryByRole('searchbox')
+
+    fireEvent.focus(searchBox)
+
+    expect(handleOnFocus).toHaveBeenCalled()
+    expect(callbackId).toEqual(searchId)
+  })
+  it('Has called onBlur when search if blured', () => {
+    const searchId = 'search-id-when-testing'
+    let callbackId = ''
+    const handleOnBlur = jest.fn(({ target: { id } }) => {
+      callbackId = id
+    })
+
+    render(<Search id={searchId} onBlur={handleOnBlur} />)
+    const searchBox = screen.queryByRole('searchbox')
+
+    fireEvent.blur(searchBox)
+
+    expect(handleOnBlur).toHaveBeenCalled()
+    expect(callbackId).toEqual(searchId)
+  })
 })