diff --git a/services/web/frontend/js/features/share-project-modal/components/select-collaborators.js b/services/web/frontend/js/features/share-project-modal/components/select-collaborators.js index be3829a916..1eb12ce2db 100644 --- a/services/web/frontend/js/features/share-project-modal/components/select-collaborators.js +++ b/services/web/frontend/js/features/share-project-modal/components/select-collaborators.js @@ -37,14 +37,20 @@ export default function SelectCollaborators({ [options, selectedEmails] ) - const filteredOptions = useMemo( - () => - matchSorter(unselectedOptions, inputValue, { - keys: ['name', 'email'], - threshold: matchSorter.rankings.CONTAINS, - }), - [unselectedOptions, inputValue] - ) + const filteredOptions = useMemo(() => { + if (inputValue === '') { + return unselectedOptions + } + + return matchSorter(unselectedOptions, inputValue, { + keys: ['name', 'email'], + threshold: matchSorter.rankings.CONTAINS, + baseSort: (a, b) => { + // Prefer server-side sorting for ties in the match ranking. + return a.index - b.index > 0 ? 1 : -1 + }, + }) + }, [unselectedOptions, inputValue]) const inputRef = useRef(null) diff --git a/services/web/frontend/js/features/share-project-modal/hooks/use-user-contacts.js b/services/web/frontend/js/features/share-project-modal/hooks/use-user-contacts.js index 42b5f2ff75..f23af1fbd3 100644 --- a/services/web/frontend/js/features/share-project-modal/hooks/use-user-contacts.js +++ b/services/web/frontend/js/features/share-project-modal/hooks/use-user-contacts.js @@ -2,12 +2,6 @@ import { useEffect, useState } from 'react' import { getJSON } from '../../../infrastructure/fetch-json' import useAbortController from '../../../shared/hooks/use-abort-controller' -const contactCollator = new Intl.Collator('en') - -const alphabetical = (a, b) => - contactCollator.compare(a.name, b.name) || - contactCollator.compare(a.email, b.email) - export function useUserContacts() { const [loading, setLoading] = useState(true) const [data, setData] = useState(null) @@ -18,7 +12,7 @@ export function useUserContacts() { useEffect(() => { getJSON('/user/contacts', { signal }) .then(data => { - setData(data.contacts.map(buildContact).sort(alphabetical)) + setData(data.contacts.map(buildContact)) }) .catch(error => setError(error)) .finally(() => setLoading(false))