diff --git a/packages/react-templates/src/components/Select/SimpleSelect.tsx b/packages/react-templates/src/components/Select/SimpleSelect.tsx index f3e8b40fe14..4aedaae43af 100644 --- a/packages/react-templates/src/components/Select/SimpleSelect.tsx +++ b/packages/react-templates/src/components/Select/SimpleSelect.tsx @@ -80,6 +80,10 @@ const SimpleSelectBase: FunctionComponent = ({ }; const _onSelect = (_event: ReactMouseEvent | undefined, value: string | number | undefined) => { + if (isDisabled) { + return; + } + onSelect && onSelect(_event, value); setSelected(initialOptions.find((o) => o.value === value)); onToggle && onToggle(true); diff --git a/packages/react-templates/src/components/Select/__tests__/SimpleSelect.test.tsx b/packages/react-templates/src/components/Select/__tests__/SimpleSelect.test.tsx index 71a59f70dc1..6c68e35970a 100644 --- a/packages/react-templates/src/components/Select/__tests__/SimpleSelect.test.tsx +++ b/packages/react-templates/src/components/Select/__tests__/SimpleSelect.test.tsx @@ -238,3 +238,26 @@ test('Matches snapshot', async () => { expect(asFragment()).toMatchSnapshot(); }); + +test('ignores selection after the open simple select becomes disabled', async () => { + const user = userEvent.setup(); + const onSelect = jest.fn(); + const props = { + initialOptions: [ + { content: 'Apple', value: 'apple', selected: true }, + { content: 'Orange', value: 'orange' } + ], + onSelect + }; + + const { rerender } = render(); + const toggle = screen.getByRole('button', { name: 'Apple' }); + await user.click(toggle); + + rerender(); + expect(toggle).toBeDisabled(); + await user.click(screen.getByText('Orange')); + + expect(onSelect).not.toHaveBeenCalled(); + expect(toggle).toHaveTextContent('Apple'); +});