yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-07-24 17:40:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
QA/ Filter onBlur
This commit is contained in:
cyril lopez 2021-11-08 08:01:33 +01:00 committed by GitHub
commit efc9934f8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 58 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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}
/>

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

@ -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}
/>

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

@ -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,
};

5
packages/core/upload/admin/src/components/FilterPopover/index.js
View File

@ -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,

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

@ -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}