unselect all when focusing on search input

Author: Connoropolous

web/src/components/Header/HeaderRightPanel.component.tsx

@@ -88,6 +88,7 @@ export default function HeaderRightPanel({
   commentList,
   openExpandedView,
   animatePanAndZoom,
+  unselectAll,
   projectId,
 }) {
   const ref = useRef()
@@ -156,6 +157,9 @@ export default function HeaderRightPanel({
                 classNames="search-input-wrapper"
               >
                 <input
+                  onFocus={() => {
+                    unselectAll()
+                  }}
                   type="text"
                   onChange={(e) => setFilterText(e.target.value.toLowerCase())}
                   value={filterText}

web/src/components/Header/HeaderRightPanel.connector.ts

@@ -3,6 +3,7 @@ import { RootState } from '../../redux/reducer'
 import { openExpandedView } from '../../redux/ephemeral/expanded-view/actions'
 import { animatePanAndZoom } from '../../redux/ephemeral/viewport/actions'
 import HeaderRightPanel from './HeaderRightPanel.component'
+import { unselectAll } from '../../redux/ephemeral/selection/actions'
 
 function mapStateToProps(state: RootState) {
   const projectId = state.ui.activeProject
@@ -19,6 +20,9 @@ function mapStateToProps(state: RootState) {
 
 function mapDispatchToProps(dispatch) {
   return {
+    unselectAll: () => {
+      dispatch(unselectAll())
+    },
     animatePanAndZoom: (address) => {
       return dispatch(animatePanAndZoom(address))
     },