Merge pull request #16662 from overleaf/ii-share-modal-click-2

[web] Share modal select contact

GitOrigin-RevId: e43575cd97ad8e4bca249967bdf0cfc587213cc4

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)

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('<ShareProjectModal/>', function () {
       )
     })
   })
+
+  it('selects contact by typing the entire email and blurring the input', async function () {
+    renderWithEditorContext(<ShareProjectModal {...modalProps} />, {
+      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 <ptolemy@example.com>`,
+      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
+      )
+    })
+  })
 })