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 557d66c40f..7a862678b8 100644 --- a/packages/core-components/src/components/Select/Select.tsx +++ b/packages/core-components/src/components/Select/Select.tsx @@ -223,11 +223,13 @@ export function SelectComponent(props: SelectProps) { const item = items.find(el => el.value === selectedValue); return item ? ( event.stopPropagation()} /> }