From a44a6a22dcb7ebd92d6b54f6fe9cc08e99611466 Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Thu, 25 Jan 2024 14:58:59 +0200
Subject: [PATCH] Merge pull request #16662 from
 overleaf/ii-share-modal-click-2

[web] Share modal select contact

GitOrigin-RevId: e43575cd97ad8e4bca249967bdf0cfc587213cc4
---
 .../components/select-collaborators.jsx       |  5 +--
 .../components/share-project-modal.test.jsx   | 38 +++++++++++++++++++
 2 files changed, 39 insertions(+), 4 deletions(-)

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('<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
+      )
+    })
+  })
 })