diff --git a/frontend/src/component/commandBar/CommandBar.tsx b/frontend/src/component/commandBar/CommandBar.tsx
index 7c829294f7..fc7ebbcfd7 100644
--- a/frontend/src/component/commandBar/CommandBar.tsx
+++ b/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 = () => {
)}
-
+
{
elseShow={
showSuggestions && (
-
-
+
+
)
}
diff --git a/frontend/src/component/commandBar/CommandFeatures.tsx b/frontend/src/component/commandBar/CommandFeatures.tsx
index 2c1d029a26..34b51f757b 100644
--- a/frontend/src/component/commandBar/CommandFeatures.tsx
+++ b/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 (
-
+
);
};
diff --git a/frontend/src/component/commandBar/CommandPageSuggestions.tsx b/frontend/src/component/commandBar/CommandPageSuggestions.tsx
index 90e8e963b9..8b4b47e126 100644
--- a/frontend/src/component/commandBar/CommandPageSuggestions.tsx
+++ b/frontend/src/component/commandBar/CommandPageSuggestions.tsx
@@ -43,13 +43,15 @@ const pages = [
export const CommandPageSuggestions = ({
routes,
+ onClick,
}: {
routes: Record;
+ 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 (
-
+
{pageItems.map((item, index) => (
{
- onClick(item);
+ onItemClick(item);
}}
sx={listItemButtonStyle}
>
diff --git a/frontend/src/component/commandBar/CommandPages.tsx b/frontend/src/component/commandBar/CommandPages.tsx
index 8b1d336910..6c520b099f 100644
--- a/frontend/src/component/commandBar/CommandPages.tsx
+++ b/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 (
-
+
{items.map((item, index) => (
{
- onClick(item);
+ onItemClick(item);
}}
sx={listItemButtonStyle}
>
diff --git a/frontend/src/component/commandBar/CommandRecent.tsx b/frontend/src/component/commandBar/CommandRecent.tsx
index fbcd92269d..178e7303f4 100644
--- a/frontend/src/component/commandBar/CommandRecent.tsx
+++ b/frontend/src/component/commandBar/CommandRecent.tsx
@@ -42,7 +42,9 @@ const toListItemButton = (
export const CommandRecent = ({
routes,
+ onClick,
}: {
+ onClick: () => void;
routes: Record;
}) => {
const { lastVisited } = useRecentlyVisited();
@@ -50,7 +52,11 @@ export const CommandRecent = ({
toListItemButton(item, routes, index),
);
return (
-
+
{buttons}
);
diff --git a/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx b/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx
index be1d7459f5..52ff8bfedc 100644
--- a/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx
+++ b/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}