Merge pull request #11391 from strapi/filter-cm-fix

QA/ Filter onBlur

packages/core/admin/admin/src/content-manager/components/AttributeFilter/Filters.js

@@ -12,6 +12,21 @@ const Filters = ({ displayedFilters }) => {
   const buttonRef = useRef();
   const { trackUsage } = useTracking();
 
+  const handleBlur = e => {
+    // TO FIX - select's modals prevent blur to work correctly
+    const notNull = e.currentTarget !== null && e.relatedTarget !== null;
+    const ulListBox = document.querySelector('[role="listbox"]');
+
+    if (
+      !e.currentTarget.contains(e.relatedTarget) &&
+      e.relatedTarget !== buttonRef.current &&
+      e.relatedTarget !== ulListBox &&
+      notNull
+    ) {
+      setIsVisible(false);
+    }
+  };
+
   const handleToggle = () => {
     if (!isVisible) {
       trackUsage('willFilterEntries');
@@ -35,6 +50,7 @@ const Filters = ({ displayedFilters }) => {
           <FilterPopoverURLQuery
             displayedFilters={displayedFilters}
             isVisible={isVisible}
+            onBlur={handleBlur}
             onToggle={handleToggle}
             source={buttonRef}
           />

packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/Filters/index.js

@@ -11,6 +11,21 @@ const Filters = ({ displayedFilters }) => {
   const { formatMessage } = useIntl();
   const buttonRef = useRef();
 
+  const handleBlur = e => {
+    // TO FIX - select's modals prevent blur to work correctly
+    const notNull = e.currentTarget !== null && e.relatedTarget !== null;
+    const ulListBox = document.querySelector('[role="listbox"]');
+
+    if (
+      !e.currentTarget.contains(e.relatedTarget) &&
+      e.relatedTarget !== buttonRef.current &&
+      e.relatedTarget !== ulListBox &&
+      notNull
+    ) {
+      setIsVisible(false);
+    }
+  };
+
   const handleToggle = () => {
     setIsVisible(prev => !prev);
   };
@@ -31,6 +46,7 @@ const Filters = ({ displayedFilters }) => {
           <FilterPopoverURLQuery
             displayedFilters={displayedFilters}
             isVisible={isVisible}
+            onBlur={handleBlur}
             onToggle={handleToggle}
             source={buttonRef}
           />

packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/index.js

@@ -19,7 +19,7 @@ import useTracking from '../../hooks/useTracking';
 import Inputs from './Inputs';
 import getFilterList from './utils/getFilterList';
 
-const FilterPopoverURLQuery = ({ displayedFilters, isVisible, onToggle, source }) => {
+const FilterPopoverURLQuery = ({ displayedFilters, isVisible, onBlur, onToggle, source }) => {
   const [{ query }, setQuery] = useQueryParams();
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
@@ -115,7 +115,7 @@ const FilterPopoverURLQuery = ({ displayedFilters, isVisible, onToggle, source }
   const operator = modifiedData.filter;
 
   return (
-    <Popover source={source} padding={3} spacing={4}>
+    <Popover source={source} padding={3} spacing={4} onBlur={onBlur}>
       <FocusTrap onEscape={onToggle}>
         <form onSubmit={handleSubmit}>
           <Stack size={1} style={{ minWidth: 184 }}>
@@ -181,6 +181,10 @@ const FilterPopoverURLQuery = ({ displayedFilters, isVisible, onToggle, source }
   );
 };
 
+FilterPopoverURLQuery.defaultProps = {
+  onBlur: () => {},
+};
+
 FilterPopoverURLQuery.propTypes = {
   displayedFilters: PropTypes.arrayOf(
     PropTypes.shape({
@@ -195,6 +199,7 @@ FilterPopoverURLQuery.propTypes = {
     })
   ).isRequired,
   isVisible: PropTypes.bool.isRequired,
+  onBlur: PropTypes.func,
   onToggle: PropTypes.func.isRequired,
   source: PropTypes.shape({ current: PropTypes.instanceOf(Element) }).isRequired,
 };

packages/core/upload/admin/src/components/FilterPopover/index.js

@@ -17,7 +17,7 @@ import Plus from '@strapi/icons/Plus';
 import FilterValueInput from './FilterValueInput';
 import getFilterList from './utils/getFilterList';
 
-const FilterPopover = ({ displayedFilters, filters, onSubmit, onToggle, source }) => {
+const FilterPopover = ({ displayedFilters, filters, onSubmit, onToggle, source, onBlur }) => {
   const { formatMessage } = useIntl();
 
   const [modifiedData, setModifiedData] = useState({
@@ -192,7 +192,7 @@ const FilterPopover = ({ displayedFilters, filters, onSubmit, onToggle, source }
 
   return (
     <>
-      <Popover source={source} padding={3} spacing={4}>
+      <Popover source={source} padding={3} spacing={4} onBlur={onBlur}>
         <FocusTrap onEscape={onToggle}>
           <form onSubmit={handleSubmit}>
             <Stack size={1} style={{ minWidth: 184 }}>
@@ -266,6 +266,7 @@ FilterPopover.propTypes = {
     })
   ).isRequired,
   filters: PropTypes.array.isRequired,
+  onBlur: PropTypes.func.isRequired,
   onSubmit: PropTypes.func.isRequired,
   onToggle: PropTypes.func.isRequired,
   source: PropTypes.shape({ current: PropTypes.instanceOf(Element) }).isRequired,

packages/core/upload/admin/src/pages/App/components/Filters.js

@@ -45,6 +45,21 @@ export const Filters = () => {
 
   const toggleFilter = () => setVisible(prev => !prev);
 
+  const handleBlur = e => {
+    // TO FIX - select's modals prevent blur to work correctly
+    const notNull = e.currentTarget !== null && e.relatedTarget !== null;
+    const ulListBox = document.querySelector('[role="listbox"]');
+
+    if (
+      !e.currentTarget.contains(e.relatedTarget) &&
+      e.relatedTarget !== buttonRef.current &&
+      e.relatedTarget !== ulListBox &&
+      notNull
+    ) {
+      setVisible(false);
+    }
+  };
+
   const handleRemoveFilter = nextFilters => {
     setQuery({ filters: { $and: nextFilters }, page: 1 });
   };
@@ -68,6 +83,7 @@ export const Filters = () => {
         <FilterPopover
           displayedFilters={displayedFilters}
           filters={filters}
+          onBlur={handleBlur}
           onSubmit={handleSubmit}
           onToggle={toggleFilter}
           source={buttonRef}