diff --git a/static/app/components/core/compactSelect/compactSelect.spec.tsx b/static/app/components/core/compactSelect/compactSelect.spec.tsx index 995a13dd51e6be..b9436a8416b9d4 100644 --- a/static/app/components/core/compactSelect/compactSelect.spec.tsx +++ b/static/app/components/core/compactSelect/compactSelect.spec.tsx @@ -447,6 +447,87 @@ describe('CompactSelect', () => { expect(screen.queryByRole('option', {name: 'Option One'})).not.toBeInTheDocument(); }); + it('selects the single remaining option when Enter is pressed', async () => { + const onChange = jest.fn(); + render( + + ); + + await userEvent.click(screen.getByRole('button')); + await userEvent.click(screen.getByPlaceholderText('Search here…')); + + // type 'Two' to narrow the list to exactly one option + await userEvent.keyboard('Two'); + expect(screen.getByRole('option', {name: 'Option Two'})).toBeInTheDocument(); + expect(screen.queryByRole('option', {name: 'Option One'})).not.toBeInTheDocument(); + + // pressing Enter should select the single visible option + await userEvent.keyboard('{Enter}'); + expect(onChange).toHaveBeenCalledWith(expect.objectContaining({value: 'opt_two'})); + }); + + it('does not auto-select when multiple options are visible and Enter is pressed', async () => { + const onChange = jest.fn(); + render( + + ); + + await userEvent.click(screen.getByRole('button')); + await userEvent.click(screen.getByPlaceholderText('Search here…')); + + // type 'Option' — both options are still visible + await userEvent.keyboard('Option'); + expect(screen.getByRole('option', {name: 'Option One'})).toBeInTheDocument(); + expect(screen.getByRole('option', {name: 'Option Two'})).toBeInTheDocument(); + + // pressing Enter should not select anything + await userEvent.keyboard('{Enter}'); + expect(onChange).not.toHaveBeenCalled(); + }); + + it('does not auto-select when one enabled and one disabled option are visible', async () => { + const onChange = jest.fn(); + render( + + ); + + await userEvent.click(screen.getByRole('button')); + await userEvent.click(screen.getByPlaceholderText('Search here…')); + + // type 'Option' — both options are visible (one enabled, one disabled) + await userEvent.keyboard('Option'); + expect(screen.getByRole('option', {name: 'Option One'})).toBeInTheDocument(); + expect(screen.getByRole('option', {name: 'Option Two'})).toBeInTheDocument(); + + // pressing Enter must not auto-select even though only one option is enabled + await userEvent.keyboard('{Enter}'); + expect(onChange).not.toHaveBeenCalled(); + }); + it('restores full list when search query is cleared', async () => { render( (`li[role="${role}"]`) ?? + []), + ]; + const firstOption = allVisibleOptions[0]; + if ( + allVisibleOptions.length === 1 && + firstOption && + firstOption.getAttribute('aria-disabled') !== 'true' + ) { + firstOption.click(); + } } // Continue propagation, otherwise the overlay won't close on Esc key press