diff --git a/.changeset/metal-crabs-agree.md b/.changeset/metal-crabs-agree.md
new file mode 100644
index 0000000000..c5a2d1102d
--- /dev/null
+++ b/.changeset/metal-crabs-agree.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+Declared CancelIcon explicitly on Chip component inside Select.tsx to disable onMouseDown event by default that creates the flaw of re-opening select component when user tries to remove a selected filter.
diff --git a/packages/core-components/src/components/Select/Select.test.tsx b/packages/core-components/src/components/Select/Select.test.tsx
index b83ac68d5b..505152db5f 100644
--- a/packages/core-components/src/components/Select/Select.test.tsx
+++ b/packages/core-components/src/components/Select/Select.test.tsx
@@ -93,4 +93,62 @@ describe('', () => {
const input = getByTestId('custom-select');
expect(input.textContent).toBe('All results');
});
+
+ it('should not open dropdown when deleting Chip component from Select', () => {
+ const items = [
+ { value: 'test_1', label: 'test 1' },
+ { value: 'test_2', label: 'test 2' },
+ ];
+
+ const handleChange = jest.fn();
+
+ const { getByTestId, queryByText } = render(
+ ,
+ );
+
+ // Verify Chip component exist
+ const chip = getByTestId('chip');
+ expect(chip).toBeInTheDocument();
+ expect(chip.textContent).toContain('test 1');
+
+ // Find cancel icon
+ const cancelIcon = getByTestId('cancel-icon');
+ expect(cancelIcon).toBeInTheDocument();
+
+ // Verify dropdown is initially closed
+ expect(queryByText('test 2')).not.toBeInTheDocument();
+
+ // Fire mouseDown on Chip's CancelIcon that tests if onMouseDown={event => event.stopPropagation()} is working properly
+ fireEvent.mouseDown(cancelIcon);
+
+ // Verify dropdown is closed after mouseDown on Chip's CancelIcon
+ expect(queryByText('test 2')).not.toBeInTheDocument();
+
+ // Delete the Chip
+ fireEvent.click(cancelIcon);
+
+ // Verify dropdown is still closed after the removal of Chip
+ expect(queryByText('test 2')).not.toBeInTheDocument();
+
+ // Verify Chip is removed
+ expect(chip).not.toBeInTheDocument();
+ expect(queryByText('test 1')).not.toBeInTheDocument();
+
+ // Verify we can still open the dropdown with a click on the select
+ const selectInput = getByTestId('select');
+ expect(selectInput.textContent).toBe('All results');
+
+ // Simulate click on select
+ fireEvent.mouseDown(within(selectInput).getByRole('button'));
+
+ // Now dropdown should be open
+ expect(queryByText('test 2')).toBeInTheDocument();
+ });
});
diff --git a/packages/core-components/src/components/Select/Select.tsx b/packages/core-components/src/components/Select/Select.tsx
index 6b5174820b..7a862678b8 100644
--- a/packages/core-components/src/components/Select/Select.tsx
+++ b/packages/core-components/src/components/Select/Select.tsx
@@ -28,6 +28,7 @@ import {
withStyles,
} from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
+import CancelIcon from '@material-ui/icons/Cancel';
import React, { useEffect, useState } from 'react';
import ClosedDropdown from './static/ClosedDropdown';
@@ -222,9 +223,16 @@ export function SelectComponent(props: SelectProps) {
const item = items.find(el => el.value === selectedValue);
return item ? (
event.stopPropagation()}
+ />
+ }
onDelete={handleDelete(selectedValue)}
className={classes.chip}
/>