From 2764c72902b8cc65aee483129a7a2ddd9ae19805 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 28 Oct 2021 14:45:56 +0200 Subject: [PATCH 1/6] onBlur for CM's filters --- .../components/AttributeFilter/Filters.js | 7 +++++++ .../lib/src/components/FilterPopoverURLQuery/index.js | 9 +++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) 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 f1e12aa6fe..ac1860e140 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 @@ -19,6 +19,12 @@ const Filters = ({ displayedFilters }) => { setIsVisible(prev => !prev); }; + const handleBlur = e => { + if (!e.currentTarget.contains(e.relatedTarget)) { + setIsVisible(false); + } + }; + return ( <> @@ -35,6 +41,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 f8193114ab..2c372062cb 100644 --- a/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/index.js +++ b/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/index.js @@ -24,7 +24,7 @@ const FullWidthButton = styled(Button)` width: 100%; `; -const FilterPopoverURLQuery = ({ displayedFilters, isVisible, onToggle, source }) => { +const FilterPopoverURLQuery = ({ displayedFilters, isVisible, onBlur, onToggle, source }) => { const [{ query }, setQuery] = useQueryParams(); const { formatMessage } = useIntl(); const { trackUsage } = useTracking(); @@ -120,7 +120,7 @@ const FilterPopoverURLQuery = ({ displayedFilters, isVisible, onToggle, source } const operator = modifiedData.filter; return ( - +
@@ -186,6 +186,10 @@ const FilterPopoverURLQuery = ({ displayedFilters, isVisible, onToggle, source } ); }; +FilterPopoverURLQuery.defaultProps = { + onBlur: () => {}, +}; + FilterPopoverURLQuery.propTypes = { displayedFilters: PropTypes.arrayOf( PropTypes.shape({ @@ -200,6 +204,7 @@ FilterPopoverURLQuery.propTypes = { }) ).isRequired, isVisible: PropTypes.bool.isRequired, + onBlur: PropTypes.func, onToggle: PropTypes.func.isRequired, source: PropTypes.shape({ current: PropTypes.instanceOf(Element) }).isRequired, }; From 350f3b54fa6e7e882dfeec983bc46cddc757987f Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 28 Oct 2021 16:23:09 +0200 Subject: [PATCH 2/6] new attempt to fix filters's CM onBlur --- .../components/AttributeFilter/Filters.js | 13 +++++++++++++ .../FilterPopoverURLQuery.stories.mdx | 11 +++++++++++ .../src/components/FilterPopoverURLQuery/index.js | 9 +++++++-- 3 files changed, 31 insertions(+), 2 deletions(-) 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 f1e12aa6fe..16af3d07fa 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,18 @@ const Filters = ({ displayedFilters }) => { const buttonRef = useRef(); const { trackUsage } = useTracking(); + const handleBlur = e => { + const ulListBox = document.querySelector('[role="listbox"]'); + + if ( + !e.currentTarget.contains(e.relatedTarget) && + e.relatedTarget !== buttonRef.current && + e.relatedTarget !== ulListBox + ) { + setIsVisible(false); + } + }; + const handleToggle = () => { if (!isVisible) { trackUsage('willFilterEntries'); @@ -35,6 +47,7 @@ const Filters = ({ displayedFilters }) => { diff --git a/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx b/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx index 62a6356b84..ac5da410a8 100644 --- a/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx +++ b/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx @@ -30,6 +30,16 @@ import { FilterListURLQuery } from '@strapi/helper-plugin'; const handleToggle = () => { setIsVisible(prev => !prev); }; + const handleBlur = (e) => { + const ulListBox = document.querySelector('[role="listbox"]'); + if ( + !e.currentTarget.contains(e.relatedTarget) && + e.relatedTarget !== buttonRef.current && + e.relatedTarget !== ulListBox + ) { + setIsVisible(false) + } + } const [{ query }, setQuery] = useQueryParams(); const filters = { $and: [{ city: { $eq: 'paris' } }, { categories: { name: { $eq: 'paris' } } }], @@ -63,6 +73,7 @@ import { FilterListURLQuery } from '@strapi/helper-plugin'; isVisible={isVisible} onToggle={handleToggle} source={buttonRef} + onBlur={handleBlur} /> 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 f8193114ab..30fc59079e 100644 --- a/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/index.js +++ b/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/index.js @@ -24,7 +24,7 @@ const FullWidthButton = styled(Button)` width: 100%; `; -const FilterPopoverURLQuery = ({ displayedFilters, isVisible, onToggle, source }) => { +const FilterPopoverURLQuery = ({ displayedFilters, isVisible, onToggle, source, onBlur }) => { const [{ query }, setQuery] = useQueryParams(); const { formatMessage } = useIntl(); const { trackUsage } = useTracking(); @@ -120,7 +120,7 @@ const FilterPopoverURLQuery = ({ displayedFilters, isVisible, onToggle, source } const operator = modifiedData.filter; return ( - + @@ -186,6 +186,10 @@ const FilterPopoverURLQuery = ({ displayedFilters, isVisible, onToggle, source } ); }; +FilterPopoverURLQuery.defaultProps = { + onBlur: () => {}, +}; + FilterPopoverURLQuery.propTypes = { displayedFilters: PropTypes.arrayOf( PropTypes.shape({ @@ -200,6 +204,7 @@ FilterPopoverURLQuery.propTypes = { }) ).isRequired, isVisible: PropTypes.bool.isRequired, + onBlur: PropTypes.func, onToggle: PropTypes.func.isRequired, source: PropTypes.shape({ current: PropTypes.instanceOf(Element) }).isRequired, }; From 42a761c25dd03e02b9b466b2543974c40d6d5ebe Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 28 Oct 2021 16:33:43 +0200 Subject: [PATCH 3/6] last attempt to fix filters blur in CM --- .../content-manager/components/AttributeFilter/Filters.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 16af3d07fa..9ee03c849b 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 @@ -13,12 +13,15 @@ const Filters = ({ displayedFilters }) => { 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 + e.relatedTarget !== ulListBox && + notNull ) { setIsVisible(false); } From 60ad60af4a0608dbbbb1acfca3bd766c14ee68e4 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 28 Oct 2021 18:28:43 +0200 Subject: [PATCH 4/6] PR review fix --- .../FilterPopoverURLQuery.stories.mdx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx b/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx index ac5da410a8..62a6356b84 100644 --- a/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx +++ b/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx @@ -30,16 +30,6 @@ import { FilterListURLQuery } from '@strapi/helper-plugin'; const handleToggle = () => { setIsVisible(prev => !prev); }; - const handleBlur = (e) => { - const ulListBox = document.querySelector('[role="listbox"]'); - if ( - !e.currentTarget.contains(e.relatedTarget) && - e.relatedTarget !== buttonRef.current && - e.relatedTarget !== ulListBox - ) { - setIsVisible(false) - } - } const [{ query }, setQuery] = useQueryParams(); const filters = { $and: [{ city: { $eq: 'paris' } }, { categories: { name: { $eq: 'paris' } } }], @@ -73,7 +63,6 @@ import { FilterListURLQuery } from '@strapi/helper-plugin'; isVisible={isVisible} onToggle={handleToggle} source={buttonRef} - onBlur={handleBlur} /> From 4edb9860b464674d38ab41930625e583cf7e07a9 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Wed, 3 Nov 2021 16:39:14 +0100 Subject: [PATCH 5/6] added handleBlur for users settings filters --- .../pages/Users/ListPage/Filters/index.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) 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 }) => { From d59d7d1c80eadf28b1b09c5d2726b2dec3332ace Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Wed, 3 Nov 2021 16:51:39 +0100 Subject: [PATCH 6/6] added handleBlur for ML FilterPopover --- .../admin/src/components/FilterPopover/index.js | 5 +++-- .../admin/src/pages/App/components/Filters.js | 16 ++++++++++++++++ 2 files changed, 19 insertions(+), 2 deletions(-) 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 = () => {