fix: close filter dropdown after click outside

Author: fhlavac

packages/module/src/DataViewFilters/DataViewFilters.tsx

@@ -1,9 +1,16 @@
-import React, { useMemo, useState, useRef, useEffect, ReactElement } from 'react';
+import React, { useMemo, useState, useRef, useEffect, ReactElement, ReactNode } from 'react';
 import {
   Menu, MenuContent, MenuItem, MenuList, MenuToggle, Popper, ToolbarGroup, ToolbarToggleGroup, ToolbarToggleGroupProps,
 } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
 
+export interface DataViewFilterOption {
+  /** Filter option label */
+  label: ReactNode;
+  /** Filter option value */
+  value: string;
+}
+
 // helper interface to generate attribute menu
 interface DataViewFilterIdentifiers {
   filterId: string;
@@ -57,6 +64,19 @@ export const DataViewFilters = <T extends object>({
     filterItems.length > 0 && setActiveAttributeMenu(filterItems[0].title);
   }, [ filterItems ]);
 
+  const handleClickOutside = (event: MouseEvent) => 
+    isAttributeMenuOpen &&
+    !attributeMenuRef.current?.contains(event.target as Node) &&
+    !attributeToggleRef.current?.contains(event.target as Node)
+    && setIsAttributeMenuOpen(false);
+
+  useEffect(() => {
+    window.addEventListener('click', handleClickOutside);
+    return () => {
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [ isAttributeMenuOpen ]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const attributeToggle = (
     <MenuToggle
       ref={attributeToggleRef}
@@ -102,9 +122,9 @@ export const DataViewFilters = <T extends object>({
             isVisible={isAttributeMenuOpen}
           />
         </div>
-        {React.Children.map(children, (child) => (
-          React.isValidElement(child) ? (
-            React.cloneElement(child as ReactElement<{
+        {React.Children.map(children, (child) =>
+          React.isValidElement(child)
+            ? React.cloneElement(child as ReactElement<{
               showToolbarItem: boolean;
               onChange: (_e: unknown, values: unknown) => void;
               value: unknown;
@@ -114,9 +134,8 @@ export const DataViewFilters = <T extends object>({
               value: values?.[child.props.filterId],
               ...child.props
             })
-          ) : child
-        ))}
-
+            : child
+        )}
       </ToolbarGroup>
     </ToolbarToggleGroup>
   );

packages/module/src/DataViewTextFilter/DataViewTextFilter.tsx

@@ -31,6 +31,7 @@ export const DataViewTextFilter: React.FC<DataViewTextFilterProps> = ({
   ...props
 }: DataViewTextFilterProps) => (
   <ToolbarFilter
+    key={ouiaId}
     data-ouia-component-id={ouiaId}
     chips={value.length > 0 ? [ { key: title, node: value } ] : []}
     deleteChip={() => onChange?.(undefined, '')}