Fix the kebab menu close when we click outside the kebab.

BZ: https://bugzilla.redhat.com/show_bug.cgi?id=2308314 Jira: https://issues.redhat.com/browse/DFBUGS-351 Signed-off-by: Timothy Asir Jeyasingh <[email protected]>
red-hat-storage · Nov 14, 2024 · 3626987 · 3626987
1 parent cb13092
commit 3626987
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/locales/en/plugin__odf-console.json b/locales/en/plugin__odf-console.json
@@ -1159,8 +1159,8 @@
   "Edit labels": "Edit labels",
   "Edit annotations": "Edit annotations",
   "Edit bucket": "Edit bucket",
-  "Objects": "Objects",
   "Refresh": "Refresh",
+  "Objects": "Objects",
   "Created via OBC": "Created via OBC",
   "Created via S3": "Created via S3",
   "MCG": "MCG",

diff --git a/packages/shared/src/kebab/kebab.tsx b/packages/shared/src/kebab/kebab.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useCallback, useEffect } from 'react';
 import { getName, getNamespace } from '@odf/shared/selectors';
 import {
   K8sResourceCommon,
@@ -21,6 +22,32 @@ import { ModalKeys, defaultModalMap } from '../modals/types';
 import { useCustomTranslation } from '../useCustomTranslationHook';
 import { referenceForModel } from '../utils';
 
+const useClickOutside = (
+  ref: React.RefObject<HTMLElement>,
+  callback: () => void
+) => {
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        callback();
+      }
+    };
+
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        callback();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscapeKey);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscapeKey);
+    };
+  }, [ref, callback]);
+};
+
 export type CustomKebabItem = {
   key: string;
   value: string;
@@ -102,19 +129,19 @@ export const Kebab: React.FC<KebabProps> & KebabStaticProperties = ({
   hideItems,
 }) => {
   const { t } = useCustomTranslation();
-
   const launchModal = useModal();
-
   const eventRef = React.useRef(undefined);
   const dropdownToggleRef = React.useRef();
   const [toggleDirection, setToggleDirection] =
     React.useState<DropdownPopperProps['direction']>('down');
   const [isOpen, setOpen] = React.useState(false);
+  const closeDropdown = useCallback(() => setOpen(false), []);
 
-  const { resourceModel, resource } = extraProps;
+  // Use the custom hook to detect clicks outside the Kebab menu
+  useClickOutside(dropdownToggleRef, closeDropdown);
 
+  const { resourceModel, resource } = extraProps;
   const resourceLabel = resourceModel.label;
-
   const navigate = useNavigate();
 
   const [canCreate, createLoading] = useAccessReview({
@@ -241,6 +268,7 @@ export const Kebab: React.FC<KebabProps> & KebabStaticProperties = ({
   const content = _.has(resource.metadata, 'deletionTimestamp')
     ? terminatingTooltip || t('Resource is being deleted.')
     : '';
+
   return (
     <Tooltip
       content={
@@ -263,7 +291,7 @@ export const Kebab: React.FC<KebabProps> & KebabStaticProperties = ({
               ref={dropdownToggleRef}
               aria-label="Dropdown toggle"
               variant={toggleType === 'Kebab' ? 'plain' : 'default'}
-              onClick={() => setOpen((o) => !o)}
+              onClick={() => setOpen(!isOpen)}
               isExpanded={isOpen}
               data-test="kebab-button"
               isDisabled={isDisabled}