feat: clear search string and close box after click (#7511)

Now when selecting an item from command menu, the search string is
cleared and command menu closed.

frontend/src/component/commandBar/CommandBar.tsx

@@ -179,6 +179,11 @@ export const CommandBar = () => {
         setValue(value);
     };
 
+    const clearSearchValue = () => {
+        onSearchChange('');
+        setShowSuggestions(false);
+    };
+
     const hotkey = useKeyboardShortcut(
         {
             modifiers: ['ctrl'],
@@ -262,14 +267,19 @@ export const CommandBar = () => {
                             <CommandFeatures
                                 searchString={searchString}
                                 setSearchedFlagCount={setSearchedFlagCount}
+                                onClick={clearSearchValue}
                             />
                         )}
                         <CommandResultGroup
                             groupName={'Projects'}
                             icon={'flag'}
+                            onClick={clearSearchValue}
                             items={searchedProjects}
                         />
-                        <CommandPages items={searchedPages} />
+                        <CommandPages
+                            items={searchedPages}
+                            onClick={clearSearchValue}
+                        />
                         <ConditionallyRender
                             condition={hasNoResults}
                             show={
@@ -283,8 +293,14 @@ export const CommandBar = () => {
                 elseShow={
                     showSuggestions && (
                         <CommandResultsPaper onKeyDownCapture={onKeyDown}>
-                            <CommandRecent routes={allRoutes} />
-                            <CommandPageSuggestions routes={allRoutes} />
+                            <CommandRecent
+                                routes={allRoutes}
+                                onClick={clearSearchValue}
+                            />
+                            <CommandPageSuggestions
+                                routes={allRoutes}
+                                onClick={clearSearchValue}
+                            />
                         </CommandResultsPaper>
                     )
                 }

frontend/src/component/commandBar/CommandFeatures.tsx

@@ -8,10 +8,12 @@ import { useEffect } from 'react';
 interface ICommandBar {
     searchString: string;
     setSearchedFlagCount: (count: number) => void;
+    onClick: () => void;
 }
 export const CommandFeatures = ({
     searchString,
     setSearchedFlagCount,
+    onClick,
 }: ICommandBar) => {
     const { features = [] } = useFeatureSearch(
         {
@@ -34,6 +36,11 @@ export const CommandFeatures = ({
     }, [JSON.stringify(flags)]);
 
     return (
-        <CommandResultGroup groupName={'Flags'} icon={'flag'} items={flags} />
+        <CommandResultGroup
+            groupName={'Flags'}
+            icon={'flag'}
+            items={flags}
+            onClick={onClick}
+        />
     );
 };

frontend/src/component/commandBar/CommandPageSuggestions.tsx

@@ -43,13 +43,15 @@ const pages = [
 
 export const CommandPageSuggestions = ({
     routes,
+    onClick,
 }: {
     routes: Record<string, { path: string; route: string; title: string }>;
+    onClick: () => void;
 }) => {
     const { trackEvent } = usePlausibleTracker();
     const filtered = pages.filter((page) => routes[page]);
     const pageItems = toListItemData(filtered, routes);
-    const onClick = (item: IPageSuggestionItem) => {
+    const onItemClick = (item: IPageSuggestionItem) => {
         trackEvent('command-bar', {
             props: {
                 eventType: `click`,
@@ -58,9 +60,10 @@ export const CommandPageSuggestions = ({
                 pageType: item.name,
             },
         });
+        onClick();
     };
     return (
-        <CommandResultGroup icon='pages' groupName='Pages'>
+        <CommandResultGroup icon='pages' groupName='Pages' onClick={onClick}>
             {pageItems.map((item, index) => (
                 <ListItemButton
                     key={`recently-visited-${index}`}
@@ -68,7 +71,7 @@ export const CommandPageSuggestions = ({
                     component={Link}
                     to={item.path}
                     onClick={() => {
-                        onClick(item);
+                        onItemClick(item);
                     }}
                     sx={listItemButtonStyle}
                 >

frontend/src/component/commandBar/CommandPages.tsx

@@ -13,13 +13,15 @@ import { IconRenderer } from 'component/layout/MainLayout/NavigationSidebar/Icon
 
 export const CommandPages = ({
     items,
+    onClick,
 }: {
     items: CommandResultGroupItem[];
+    onClick: () => void;
 }) => {
     const { trackEvent } = usePlausibleTracker();
     const groupName = 'Pages';
 
-    const onClick = (item: CommandResultGroupItem) => {
+    const onItemClick = (item: CommandResultGroupItem) => {
         trackEvent('command-bar', {
             props: {
                 eventType: `click`,
@@ -28,9 +30,14 @@ export const CommandPages = ({
                 ...(groupName === 'Pages' && { pageType: item.name }),
             },
         });
+        onClick();
     };
     return (
-        <CommandResultGroup groupName={'Pages'} icon={'default'}>
+        <CommandResultGroup
+            groupName={'Pages'}
+            icon={'default'}
+            onClick={onClick}
+        >
             {items.map((item, index) => (
                 <ListItemButton
                     key={`command-result-group-pages-${index}`}
@@ -38,7 +45,7 @@ export const CommandPages = ({
                     component={Link}
                     to={item.link}
                     onClick={() => {
-                        onClick(item);
+                        onItemClick(item);
                     }}
                     sx={listItemButtonStyle}
                 >

frontend/src/component/commandBar/CommandRecent.tsx

@@ -42,7 +42,9 @@ const toListItemButton = (
 
 export const CommandRecent = ({
     routes,
+    onClick,
 }: {
+    onClick: () => void;
     routes: Record<string, { path: string; route: string; title: string }>;
 }) => {
     const { lastVisited } = useRecentlyVisited();
@@ -50,7 +52,11 @@ export const CommandRecent = ({
         toListItemButton(item, routes, index),
     );
     return (
-        <CommandResultGroup icon='default' groupName='Quick suggestions'>
+        <CommandResultGroup
+            icon='default'
+            groupName='Quick suggestions'
+            onClick={onClick}
+        >
             <List>{buttons}</List>
         </CommandResultGroup>
     );

frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx

@@ -180,6 +180,7 @@ interface CommandResultGroupProps {
     icon: string;
     groupName: string;
     items?: CommandResultGroupItem[];
+    onClick: () => void;
     children?: React.ReactNode;
 }
 
@@ -187,6 +188,7 @@ export const CommandResultGroup = ({
     icon,
     groupName,
     items,
+    onClick,
     children,
 }: CommandResultGroupProps) => {
     const { trackEvent } = usePlausibleTracker();
@@ -199,7 +201,7 @@ export const CommandResultGroup = ({
 
     const slicedItems = items?.slice(0, 3);
 
-    const onClick = (item: CommandResultGroupItem) => {
+    const onItemClick = (item: CommandResultGroupItem) => {
         trackEvent('command-bar', {
             props: {
                 eventType: `click`,
@@ -208,6 +210,7 @@ export const CommandResultGroup = ({
                 ...(groupName === 'Pages' && { pageType: item.name }),
             },
         });
+        onClick();
     };
 
     return (
@@ -222,8 +225,9 @@ export const CommandResultGroup = ({
                         key={`command-result-group-${groupName}-${index}`}
                         dense={true}
                         component={Link}
-                        onClick={() => {
-                            onClick(item);
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onItemClick(item);
                         }}
                         to={item.link}
                         sx={listItemButtonStyle}