diff --git a/src/editors/sharedComponents/TypeaheadDropdown/index.jsx b/src/editors/sharedComponents/TypeaheadDropdown/index.jsx index 0a9b521be..e9dd6cd9d 100644 --- a/src/editors/sharedComponents/TypeaheadDropdown/index.jsx +++ b/src/editors/sharedComponents/TypeaheadDropdown/index.jsx @@ -45,7 +45,7 @@ class TypeaheadDropdown extends React.Component { options = options.filter((option) => (option.toLowerCase().includes(strToFind.toLowerCase()))); } - return options.map((opt) => { + return options.sort().map((opt) => { let value = opt; if (value.length > 30) { value = value.substring(0, 30).concat('...'); diff --git a/src/editors/sharedComponents/TypeaheadDropdown/index.test.jsx b/src/editors/sharedComponents/TypeaheadDropdown/index.test.jsx index 324ddc677..6ac9b85d2 100644 --- a/src/editors/sharedComponents/TypeaheadDropdown/index.test.jsx +++ b/src/editors/sharedComponents/TypeaheadDropdown/index.test.jsx @@ -3,6 +3,7 @@ import { fireEvent, render, screen, + waitFor, within, } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; @@ -50,11 +51,11 @@ describe('common/OrganizationDropdown.jsx', () => { fireEvent.focusOut(formInput); expect(mockHandleBlur).toHaveBeenCalled(); }); - it('renders component with options', () => { - const newProps = { ...defaultProps, options: ['opt1', 'opt2'] }; + it('renders component with options', async () => { + const newProps = { ...defaultProps, options: ['opt2', 'opt1'] }; renderComponent(newProps); const formInput = screen.getByTestId('formControl'); - fireEvent.click(formInput); + await waitFor(() => fireEvent.click(formInput)); const optionsList = within(screen.getByTestId('dropdown-container')).getAllByRole('button'); expect(optionsList.length).toEqual(newProps.options.length); });