diff --git a/services/web/frontend/js/features/share-project-modal/components/select-collaborators.jsx b/services/web/frontend/js/features/share-project-modal/components/select-collaborators.jsx
index b21546448a..bf948ea8c1 100644
--- a/services/web/frontend/js/features/share-project-modal/components/select-collaborators.jsx
+++ b/services/web/frontend/js/features/share-project-modal/components/select-collaborators.jsx
@@ -176,10 +176,7 @@ export default function SelectCollaborators({
ref: inputRef,
// preventKeyAction: showDropdown,
onBlur: () => {
- // blur: if the dropdown isn't open, try to create a new item using inputValue
- if (!isOpen) {
- addNewItem(inputValue, false)
- }
+ addNewItem(inputValue, false)
},
onChange: e => {
setInputValue(e.target.value)
diff --git a/services/web/test/frontend/features/share-project-modal/components/share-project-modal.test.jsx b/services/web/test/frontend/features/share-project-modal/components/share-project-modal.test.jsx
index 5996e6ac47..761bcfe905 100644
--- a/services/web/test/frontend/features/share-project-modal/components/share-project-modal.test.jsx
+++ b/services/web/test/frontend/features/share-project-modal/components/share-project-modal.test.jsx
@@ -8,6 +8,7 @@ import {
waitForElementToBeRemoved,
} from '@testing-library/react'
import fetchMock from 'fetch-mock'
+import userEvent from '@testing-library/user-event'
import ShareProjectModal from '../../../../../frontend/js/features/share-project-modal/components/share-project-modal'
import {
@@ -853,4 +854,41 @@ describe('', function () {
)
})
})
+
+ it('selects contact by typing the entire email and blurring the input', async function () {
+ renderWithEditorContext(, {
+ scope: { project },
+ })
+
+ const [inputElement] = await screen.findAllByLabelText(
+ 'Share with your collaborators'
+ )
+
+ // Wait for contacts to load
+ await waitFor(() => {
+ expect(fetchMock.called('express:/user/contacts')).to.be.true
+ })
+
+ // Enter a prefix that matches a contact
+ await userEvent.type(inputElement, 'ptolemy@example.com')
+
+ // The matching contact should now be present and selected
+ await screen.findByRole('option', {
+ name: `Claudius Ptolemy `,
+ selected: true,
+ })
+
+ // No items should be added yet
+ expect(screen.queryByRole('button', { name: 'Remove' })).to.be.null
+
+ // Click anywhere on the form to blur the input
+ await userEvent.click(screen.getByRole('dialog'))
+
+ // The contact should be added
+ await waitFor(() => {
+ expect(screen.getAllByRole('button', { name: 'Remove' })).to.have.length(
+ 1
+ )
+ })
+ })
})