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(', + ); + + // 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} />