Make clicking on the item to execute search work

packages/core/src/layout/Sidebar/Items.tsx

@@ -14,23 +14,23 @@
  * limitations under the License.
  */
 
+import { IconComponent } from '@backstage/core-api';
+import { BackstageTheme } from '@backstage/theme';
 import {
+  Badge,
   makeStyles,
   styled,
   TextField,
   Typography,
-  Badge,
 } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
-import { IconComponent } from '@backstage/core-api';
 import SearchIcon from '@material-ui/icons/Search';
 import clsx from 'clsx';
 import React, {
+  forwardRef,
+  KeyboardEventHandler,
+  ReactNode,
   useContext,
   useState,
-  KeyboardEventHandler,
-  forwardRef,
-  ReactNode,
 } from 'react';
 import { NavLink } from 'react-router-dom';
 import { sidebarConfig, SidebarContext } from './config';
@@ -120,7 +120,7 @@ type SidebarItemProps = {
   // If 'to' is set the item will act as a nav link with highlight, otherwise it's just a button
   to?: string;
   hasNotifications?: boolean;
-  onClick?: () => void;
+  onClick?: (ev: React.MouseEvent) => void;
   children?: ReactNode;
 };
 
@@ -218,10 +218,14 @@ export const SidebarSearchField = (props: SidebarSearchFieldProps) => {
   const [input, setInput] = useState('');
   const classes = useStyles();
 
+  const search = () => {
+    props.onSearch(input);
+    setInput('');
+  };
+
   const handleEnter: KeyboardEventHandler = ev => {
     if (ev.key === 'Enter') {
-      props.onSearch(input);
-      setInput('');
+      search();
     }
   };
 
@@ -229,18 +233,25 @@ export const SidebarSearchField = (props: SidebarSearchFieldProps) => {
     setInput(ev.target.value);
   };
 
-  const handleClick = (ev: React.MouseEvent<HTMLInputElement>) => {
+  const handleInputClick = (ev: React.MouseEvent<HTMLInputElement>) => {
     // Clicking into the search fields shouldn't navigate to the search page
     ev.preventDefault();
+    ev.stopPropagation();
+  };
+
+  const handleItemClick = (ev: React.MouseEvent) => {
+    // Clicking on the search icon while should execute a query with the current field content
+    search();
+    ev.preventDefault();
   };
 
   return (
     <div className={classes.searchRoot}>
-      <SidebarItem icon={SearchIcon} to={props.to}>
+      <SidebarItem icon={SearchIcon} to={props.to} onClick={handleItemClick}>
         <TextField
           placeholder="Search"
           value={input}
-          onClick={handleClick}
+          onClick={handleInputClick}
           onChange={handleInput}
           onKeyDown={handleEnter}
           className={classes.searchContainer}