From 36b9dfd41cae69b32bdfa78d0fc8aef757e4f3fa Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Fri, 20 Nov 2020 16:20:13 +0100
Subject: [PATCH] Rework the search field behavior in the sidebar

We just tested it with another user an noticed some more issues:
* If the user is on the search route it should be reflected in the sidebar
* Clicking on the search icon alone should lead to the search page
---
 packages/core/src/layout/Sidebar/Items.tsx           | 12 +++++++++---
 .../src/components/SidebarSearch/SidebarSearch.tsx   |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/layout/Sidebar/Items.tsx b/packages/core/src/layout/Sidebar/Items.tsx
index 498946577d..b8786886cc 100644
--- a/packages/core/src/layout/Sidebar/Items.tsx
+++ b/packages/core/src/layout/Sidebar/Items.tsx
@@ -26,7 +26,6 @@ import { IconComponent } from '@backstage/core-api';
 import SearchIcon from '@material-ui/icons/Search';
 import clsx from 'clsx';
 import React, {
-  FC,
   useContext,
   useState,
   KeyboardEventHandler,
@@ -212,9 +211,10 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>(
 
 type SidebarSearchFieldProps = {
   onSearch: (input: string) => void;
+  to?: string;
 };
 
-export const SidebarSearchField: FC<SidebarSearchFieldProps> = props => {
+export const SidebarSearchField = (props: SidebarSearchFieldProps) => {
   const [input, setInput] = useState('');
   const classes = useStyles();
 
@@ -229,12 +229,18 @@ export const SidebarSearchField: FC<SidebarSearchFieldProps> = props => {
     setInput(ev.target.value);
   };
 
+  const handleClick = (ev: React.MouseEvent<HTMLInputElement>) => {
+    // Clicking into the search fields shouldn't navigate to the search page
+    ev.preventDefault();
+  };
+
   return (
     <div className={classes.searchRoot}>
-      <SidebarItem icon={SearchIcon}>
+      <SidebarItem icon={SearchIcon} to={props.to}>
         <TextField
           placeholder="Search"
           value={input}
+          onClick={handleClick}
           onChange={handleInput}
           onKeyDown={handleEnter}
           className={classes.searchContainer}
diff --git a/plugins/search/src/components/SidebarSearch/SidebarSearch.tsx b/plugins/search/src/components/SidebarSearch/SidebarSearch.tsx
index 6a279e0743..7e72e83b02 100644
--- a/plugins/search/src/components/SidebarSearch/SidebarSearch.tsx
+++ b/plugins/search/src/components/SidebarSearch/SidebarSearch.tsx
@@ -31,5 +31,5 @@ export const SidebarSearch = () => {
     [navigate],
   );
 
-  return <SidebarSearchField onSearch={handleSearch} />;
+  return <SidebarSearchField onSearch={handleSearch} to="/search" />;
 };