diff --git a/packages/core/admin/admin/src/content-manager/components/AttributeFilter/Filters.js b/packages/core/admin/admin/src/content-manager/components/AttributeFilter/Filters.js index 2e93de492d..5f74c952f6 100644 --- a/packages/core/admin/admin/src/content-manager/components/AttributeFilter/Filters.js +++ b/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 }) => { diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/Filters/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/Filters/index.js index d3e8beeff3..4f2e22e61c 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/Filters/index.js +++ b/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 }) => { diff --git a/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/index.js b/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/index.js index 8ca26d73cb..ded28f08f1 100644 --- a/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/index.js +++ b/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 ( - +
@@ -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, }; diff --git a/packages/core/upload/admin/src/components/FilterPopover/index.js b/packages/core/upload/admin/src/components/FilterPopover/index.js index 1b99ee3c46..0b3fc695fb 100644 --- a/packages/core/upload/admin/src/components/FilterPopover/index.js +++ b/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 ( <> - + @@ -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, diff --git a/packages/core/upload/admin/src/pages/App/components/Filters.js b/packages/core/upload/admin/src/pages/App/components/Filters.js index eda2830a05..e0e51dafe5 100644 --- a/packages/core/upload/admin/src/pages/App/components/Filters.js +++ b/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 = () => {