fix: close user list when clicking outside of it (DHIS2-17345)

dhis2 · May 14, 2024 · 6946377 · 6946377
1 parent d1e833e
commit 6946377
Showing 1 changed file with 17 additions and 4 deletions.
diff --git 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}
                                         />
                                     )}