From 694637718fc4793ee2fadd63989f1e02edf3896e Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Tue, 14 May 2024 16:10:12 +0200
Subject: [PATCH] fix: close user list when clicking outside of it
 (DHIS2-17345)

---
 .../UserMention/UserMentionWrapper.js         | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/UserMention/UserMentionWrapper.js b/src/components/UserMention/UserMentionWrapper.js
index 73561fd53..25d920160 100644
--- a/src/components/UserMention/UserMentionWrapper.js
+++ b/src/components/UserMention/UserMentionWrapper.js
@@ -43,6 +43,7 @@ export const UserMentionWrapper = ({
     inputReference,
     onUserSelect,
 }) => {
+    const [listIsOpen, setListIsOpen] = useState(false)
     const [captureText, setCaptureText] = useState(false)
     const [capturedText, setCapturedText] = useState('')
     const [cloneText, setCloneText] = useState('')
@@ -54,6 +55,7 @@ export const UserMentionWrapper = ({
     })
 
     const reset = () => {
+        setListIsOpen(false)
         setCaptureText(false)
         setCapturedText('')
         setCloneText('')
@@ -63,6 +65,10 @@ export const UserMentionWrapper = ({
         clear()
     }
 
+    // close the user list when clicking in the input/textarea or outside of it (input/textarea blur)
+    const onClick = () => reset()
+    const onBlur = () => reset()
+
     // event bubbles up from the input/textarea
     const onInput = ({ target }) => {
         const { selectionEnd, value } = target
@@ -91,6 +97,7 @@ export const UserMentionWrapper = ({
         const { selectionStart } = target
 
         if (!captureText && key === '@') {
+            setListIsOpen(true)
             setCaptureText(true)
             setCaptureStartPosition(selectionStart + 1)
             setCloneText(target.value.substring(0, selectionStart) + '@')
@@ -159,15 +166,21 @@ export const UserMentionWrapper = ({
         )
     }
 
-    const onClick = (user) => () => onSelect(user)
+    const onUserClick = (user) => () => onSelect(user)
 
     return (
-        <div onKeyDown={onKeyDown} onInput={onInput} className="wrapper">
+        <div
+            onKeyDown={onKeyDown}
+            onInput={onInput}
+            onClick={onClick}
+            onBlur={onBlur}
+            className="wrapper"
+        >
             {children}
             <div className="clone">
                 <p ref={cloneRef}>{cloneText}</p>
             </div>
-            {captureText && (
+            {listIsOpen && (
                 <Portal>
                     <Popper
                         reference={getVirtualPopperReference(cloneRef)}
@@ -209,7 +222,7 @@ export const UserMentionWrapper = ({
                                             selectedUserIndex={
                                                 selectedUserIndex
                                             }
-                                            onUserClick={onClick}
+                                            onUserClick={onUserClick}
                                             pager={pager}
                                         />
                                     )}