From 23486dc0442447ddacc744e58b0544fded5df113 Mon Sep 17 00:00:00 2001
From: Lee Wilson <lee.wilson@coolestbananas.co.uk>
Date: Tue, 27 Aug 2019 14:58:01 +0100
Subject: [PATCH] fix: Fix "Search" button firing default event

When clicking the "Search" button, the default
event should not be fired. An example of this is
when the entity component is within a step of a
multi step form, and the form should not be
submitted.
---
 src/entity-search/EntitySearch.jsx            |   7 +-
 src/entity-search/EntitySearch.test.jsx       |  18 ++-
 .../__snapshots__/EntitySearch.test.jsx.snap  | 108 +++++++++---------
 3 files changed, 75 insertions(+), 58 deletions(-)

diff --git a/src/entity-search/EntitySearch.jsx b/src/entity-search/EntitySearch.jsx
index 19d503eb..a1abb5b0 100644
--- a/src/entity-search/EntitySearch.jsx
+++ b/src/entity-search/EntitySearch.jsx
@@ -25,6 +25,11 @@ const EntitySearch = ({
   error,
 }) => {
   const { filters, setFilter } = useFilter()
+  const onSearchClick = (e) => {
+    e.preventDefault()
+    onEntitySearch(filters)
+  }
+
   return (
     <>
       {previouslySelected && <PreviouslySelected {...previouslySelected} />}
@@ -44,7 +49,7 @@ const EntitySearch = ({
 
       {error && <p>{error}</p>}
 
-      <StyledButton onClick={() => onEntitySearch(filters)}>Search</StyledButton>
+      <StyledButton onClick={onSearchClick}>Search</StyledButton>
     </>
   )
 }
diff --git a/src/entity-search/EntitySearch.test.jsx b/src/entity-search/EntitySearch.test.jsx
index 59088b92..b5a78168 100644
--- a/src/entity-search/EntitySearch.test.jsx
+++ b/src/entity-search/EntitySearch.test.jsx
@@ -66,15 +66,27 @@ describe('EntitySearch', () => {
   })
 
   describe('when the "Search" button has been clicked', () => {
-    test('should render the component with entities', async () => {
-      const wrappedEntitySearch = wrapEntitySearch()
+    let wrappedEntitySearch
+    let preventDefaultMock
 
-      wrappedEntitySearch.find('Search').simulate('click')
+    beforeAll(async () => {
+      wrappedEntitySearch = wrapEntitySearch()
+      preventDefaultMock = jest.fn()
+
+      wrappedEntitySearch
+        .find('Search')
+        .simulate('click', { preventDefault: preventDefaultMock })
 
       await act(flushPromises)
 
       wrappedEntitySearch.update()
+    })
+
+    test('should prevent the default button action', () => {
+      expect(preventDefaultMock.mock.calls.length).toEqual(1)
+    })
 
+    test('should render the component with entities', () => {
       expect(wrappedEntitySearch.debug()).toMatchSnapshot()
     })
   })
diff --git a/src/entity-search/__snapshots__/EntitySearch.test.jsx.snap b/src/entity-search/__snapshots__/EntitySearch.test.jsx.snap
index e68cff90..472017df 100644
--- a/src/entity-search/__snapshots__/EntitySearch.test.jsx.snap
+++ b/src/entity-search/__snapshots__/EntitySearch.test.jsx.snap
@@ -111,12 +111,12 @@ exports[`EntitySearch when initially loading the entity search component should
         </StyledComponent>
       </styled.div>
     </EntityFilters>
-    <Search onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
-      <StyledComponent onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
-        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
-              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
+    <Search onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
+      <StyledComponent onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
+        <ForwardRef onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
+              <button onClick={[Function: onSearchClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
                 Search
               </button>
             </StyledComponent>
@@ -413,12 +413,12 @@ exports[`EntitySearch when the "Search" button has been clicked should render th
         </StyledComponent>
       </Styled(Details)>
     </CannotFindDetails>
-    <Search onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
-      <StyledComponent onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
-        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
-              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
+    <Search onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
+      <StyledComponent onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
+        <ForwardRef onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
+              <button onClick={[Function: onSearchClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
                 Search
               </button>
             </StyledComponent>
@@ -544,12 +544,12 @@ exports[`EntitySearch when the API returns 0 results should render the component
     <p>
       There are no entities to show.
     </p>
-    <Search onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
-      <StyledComponent onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
-        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
-              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
+    <Search onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
+      <StyledComponent onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
+        <ForwardRef onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
+              <button onClick={[Function: onSearchClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
                 Search
               </button>
             </StyledComponent>
@@ -675,12 +675,12 @@ exports[`EntitySearch when the API returns a server error should render the comp
     <p>
       Error occurred while searching entities.
     </p>
-    <Search onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
-      <StyledComponent onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
-        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
-              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
+    <Search onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
+      <StyledComponent onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
+        <ForwardRef onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
+              <button onClick={[Function: onSearchClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
                 Search
               </button>
             </StyledComponent>
@@ -922,12 +922,12 @@ exports[`EntitySearch when the company name filter is applied should render the
         </StyledComponent>
       </Styled(Details)>
     </CannotFindDetails>
-    <Search onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
-      <StyledComponent onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
-        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
-              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
+    <Search onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
+      <StyledComponent onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
+        <ForwardRef onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
+              <button onClick={[Function: onSearchClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
                 Search
               </button>
             </StyledComponent>
@@ -1180,12 +1180,12 @@ exports[`EntitySearch when the company postcode filter is applied should render
         </StyledComponent>
       </Styled(Details)>
     </CannotFindDetails>
-    <Search onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
-      <StyledComponent onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
-        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
-              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
+    <Search onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
+      <StyledComponent onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
+        <ForwardRef onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
+              <button onClick={[Function: onSearchClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
                 Search
               </button>
             </StyledComponent>
@@ -1482,12 +1482,12 @@ exports[`EntitySearch when the entity search results are clicked should render t
         </StyledComponent>
       </Styled(Details)>
     </CannotFindDetails>
-    <Search onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
-      <StyledComponent onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
-        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
-              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
+    <Search onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
+      <StyledComponent onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
+        <ForwardRef onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
+              <button onClick={[Function: onSearchClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
                 Search
               </button>
             </StyledComponent>
@@ -1784,12 +1784,12 @@ exports[`EntitySearch when the the cannot find link has a callback should render
         </StyledComponent>
       </Styled(Details)>
     </CannotFindDetails>
-    <Search onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
-      <StyledComponent onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
-        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
-              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
+    <Search onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
+      <StyledComponent onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
+        <ForwardRef onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
+              <button onClick={[Function: onSearchClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
                 Search
               </button>
             </StyledComponent>
@@ -2098,12 +2098,12 @@ exports[`EntitySearch when there is a previously selected "Change" link which is
         </StyledComponent>
       </Styled(Details)>
     </CannotFindDetails>
-    <Search onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
-      <StyledComponent onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
-        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
-            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
-              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
+    <Search onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
+      <StyledComponent onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
+        <ForwardRef onClick={[Function: onSearchClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\">
+            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onSearchClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-fYiAbW bAGbIC\\" forwardedComponent={{...}} forwardedRef={{...}}>
+              <button onClick={[Function: onSearchClick]} disabled={false} className=\\"sc-fYiAbW bAGbIC sc-VigVT krXvSZ\\">
                 Search
               </button>
             </StyledComponent>