From 9545af219b4ac1d32fe20afc658ae77f8060e017 Mon Sep 17 00:00:00 2001 From: Fatih Camgoz Date: Thu, 6 Mar 2025 23:29:03 -0500 Subject: [PATCH] Remove elements from multiple-select type filters in component using X icon on chip Signed-off-by: Fatih Camgoz --- .changeset/metal-crabs-agree.md | 5 +++++ packages/core-components/src/components/Select/Select.tsx | 6 ++++++ 2 files changed, 11 insertions(+) create mode 100644 .changeset/metal-crabs-agree.md 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.tsx b/packages/core-components/src/components/Select/Select.tsx index 6b5174820b..557d66c40f 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'; @@ -225,6 +226,11 @@ export function SelectComponent(props: SelectProps) { key={item?.value} label={item?.label} clickable + deleteIcon={ + event.stopPropagation()} + /> + } onDelete={handleDelete(selectedValue)} className={classes.chip} />