diff --git a/static/app/components/smartSearchBar/index.spec.jsx b/static/app/components/smartSearchBar/index.spec.jsx
index 3566fc869e7106..2219623882fdce 100644
--- a/static/app/components/smartSearchBar/index.spec.jsx
+++ b/static/app/components/smartSearchBar/index.spec.jsx
@@ -1084,11 +1084,7 @@ describe('SmartSearchBar', function () {
});
it('hides the default group after typing', async function () {
render(
-
+
);
const textbox = screen.getByRole('textbox');
@@ -1102,5 +1098,33 @@ describe('SmartSearchBar', function () {
screen.queryByTestId('default-search-group-wrapper')
).not.toBeInTheDocument();
});
+
+ it('hides the default group after picking item with applyFilter', async function () {
+ render(
+ item.title === 'device',
+ },
+ ],
+ }}
+ />
+ );
+
+ const textbox = screen.getByRole('textbox');
+ await userEvent.click(textbox);
+ expect(await screen.findByText('User identification value')).toBeInTheDocument();
+ await userEvent.click(screen.getByText('Custom Tags'));
+
+ expect(screen.queryByText('Custom Tags')).not.toBeInTheDocument();
+ expect(screen.queryByText('User identification value')).not.toBeInTheDocument();
+ expect(screen.getByText('device')).toBeInTheDocument();
+ });
});
});
diff --git a/static/app/components/smartSearchBar/index.tsx b/static/app/components/smartSearchBar/index.tsx
index 6e67ba0fb748fa..8c62aff0d4c39b 100644
--- a/static/app/components/smartSearchBar/index.tsx
+++ b/static/app/components/smartSearchBar/index.tsx
@@ -1562,12 +1562,14 @@ class SmartSearchBar extends Component {
* @param recentSearchItems List of recent search items, same format as searchItem
* @param tagName The current tag name in scope
* @param type Defines the type/state of the dropdown menu items
+ * @param skipDefaultGroup Force hide the default group even without a query
*/
updateAutoCompleteState(
searchItems: SearchItem[],
recentSearchItems: SearchItem[],
tagName: string,
- type: ItemType
+ type: ItemType,
+ skipDefaultGroup = false
) {
const {
fieldDefinitionGetter,
@@ -1589,7 +1591,7 @@ class SmartSearchBar extends Component {
maxSearchItems,
queryCharsLeft,
true,
- defaultSearchGroup,
+ skipDefaultGroup ? undefined : defaultSearchGroup,
fieldDefinitionGetter
);
@@ -1781,6 +1783,18 @@ class SmartSearchBar extends Component {
});
}
+ if (item.applyFilter) {
+ const [tagKeys, tagType] = this.getTagKeys('');
+ this.updateAutoCompleteState(
+ tagKeys.filter(item.applyFilter),
+ [],
+ '',
+ tagType,
+ true
+ );
+ return;
+ }
+
this.onAutoCompleteFromAst(replaceText, item);
};
diff --git a/static/app/components/smartSearchBar/types.tsx b/static/app/components/smartSearchBar/types.tsx
index 8d135b016e6113..799b89b07e11ae 100644
--- a/static/app/components/smartSearchBar/types.tsx
+++ b/static/app/components/smartSearchBar/types.tsx
@@ -34,6 +34,10 @@ export type SearchGroup = {
export type SearchItem = {
active?: boolean;
+ /**
+ * When this item is selected, apply a filter to the search query
+ */
+ applyFilter?: (item: SearchItem) => void;
/**
* Call a callback instead of setting a value in the search query
*/
diff --git a/static/app/views/issueList/searchBar.tsx b/static/app/views/issueList/searchBar.tsx
index 055e31b3e57f62..96ae52fe38db87 100644
--- a/static/app/views/issueList/searchBar.tsx
+++ b/static/app/views/issueList/searchBar.tsx
@@ -133,8 +133,8 @@ function IssueListSearchBar({organization, tags, ...props}: Props) {
type: ItemType.RECOMMENDED,
title: t('Custom Tags'),
desc: t('Filter events by custom tags.'),
- // TODO(scttcper): handle custom tags
- value: 'url:',
+ // Shows only tags when clicked
+ applyFilter: item => item.kind === FieldKind.TAG,
},
],
};