Remove elements from multiple-select type filters in <Table> component using X icon on chip

Signed-off-by: Fatih Camgoz <fatihcamgoz@hotmail.com.tr>

.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.

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';
@@ -225,6 +226,11 @@ export function SelectComponent(props: SelectProps) {
                       key={item?.value}
                       label={item?.label}
                       clickable
+                      deleteIcon={
+                        <CancelIcon
+                          onMouseDown={event => event.stopPropagation()}
+                        />
+                      }
                       onDelete={handleDelete(selectedValue)}
                       className={classes.chip}
                     />