feat: notification tray closes when clicked outside

src/Notifications/Notifications.jsx

@@ -1,4 +1,6 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, {
+  useState, useCallback, useEffect, useRef,
+} from 'react';
 import { NotificationsNone, Settings } from '@edx/paragon/icons';
 import {
   Badge, Form, Icon, IconButton, OverlayTrigger, Popover,
@@ -12,11 +14,12 @@ import { messages } from './messages';
 
 const Notifications = () => {
   const [showNotificationTray, setShowNotificationTray] = useState(false);
-  const notificationCounts = useSelector(getNotificationTotalUnseenCounts());
   const intl = useIntl();
-
+  const popoverRef = useRef(null);
+  const buttonRef = useRef(null);
   const dispatch = useDispatch();
   const notificationStatus = useSelector(getNotificationStatus());
+  const notificationCounts = useSelector(getNotificationTotalUnseenCounts());
 
   useEffect(() => {
     if (notificationStatus === 'idle') {
@@ -28,6 +31,23 @@ const Notifications = () => {
     setShowNotificationTray(value);
   }, []);
 
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        popoverRef.current
+        && buttonRef.current
+        && !popoverRef.current.contains(event.target)
+        && !buttonRef.current.contains(event.target)
+      ) {
+        setShowNotificationTray(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
   return (
     <div className="d-flex mx-4 my-3 bell-container">
       <OverlayTrigger
@@ -40,17 +60,19 @@ const Notifications = () => {
             id="popover-positioned-bottom"
             className="notification-tray-container"
           >
-            <Popover.Title as="h3" style={{ padding: '0px 26px 16px 24px', border: 'none' }}>
+            <div ref={popoverRef}>
-              <h2 className="text-primary-500 notification-title">
+              <Popover.Title as="h3" style={{ padding: '0px 26px 16px 24px', border: 'none' }}>
-                {intl.formatMessage(messages.notificationTitle)}
+                <h2 className="text-primary-500 notification-title">
-              </h2>
+                  {intl.formatMessage(messages.notificationTitle)}
-              <div className="setting-icon-container">
+                </h2>
-                <Icon src={Settings} />
+                <div className="setting-icon-container">
-              </div>
+                  <Icon src={Settings} />
-            </Popover.Title>
+                </div>
-            <Popover.Content className="notification-content">
+              </Popover.Title>
-              <NotificationTabs />
+              <Popover.Content className="notification-content">
-            </Popover.Content>
+                <NotificationTabs />
+              </Popover.Content>
+            </div>
           </Popover>
       )}
       >
@@ -60,7 +82,7 @@ const Notifications = () => {
             <Form.Label className="count">{notificationCounts?.Total}</Form.Label>
           </Badge>
           )}
-          <div className="bell-icon-container">
+          <div className="bell-icon-container" ref={buttonRef}>
             <IconButton
               onClick={() => { handleNotificationTray(!showNotificationTray); }}
               src={NotificationsNone}