diff --git a/package.json b/package.json index ca9ba63fd6..151efbae67 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "watch": "nx run-many --target=watch --nx-ignore-cycles" }, "resolutions": { - "@strapi/design-system": "1.17.0-typescript.0", + "@strapi/design-system": "1.18.0-typescript.0", "@types/koa": "2.13.4" }, "devDependencies": { diff --git a/packages/core/admin/admin/src/components/Form.tsx b/packages/core/admin/admin/src/components/Form.tsx index a4532d6473..cacf8cfbcc 100644 --- a/packages/core/admin/admin/src/components/Form.tsx +++ b/packages/core/admin/admin/src/components/Form.tsx @@ -687,20 +687,38 @@ const isErrorMessageDescriptor = (object?: string | object): object is Translati ); }; +/** + * Props for the Blocker component. + * @param onProceed Function to be called when the user confirms the action that triggered the blocker. + * @param onCancel Function to be called when the user cancels the action that triggered the blocker. + */ +interface BlockerProps { + onProceed?: () => void; + onCancel?: () => void; +} /* ------------------------------------------------------------------------------------------------- * Blocker * -----------------------------------------------------------------------------------------------*/ -const Blocker = () => { +const Blocker = ({ onProceed = () => {}, onCancel = () => {} }: BlockerProps) => { const { formatMessage } = useIntl(); const modified = useForm('Blocker', (state) => state.modified); const isSubmitting = useForm('Blocker', (state) => state.isSubmitting); - const blocker = useBlocker( - ({ currentLocation, nextLocation }) => - !isSubmitting && modified && currentLocation.pathname !== nextLocation.pathname - ); + const blocker = useBlocker(({ currentLocation, nextLocation }) => { + return ( + !isSubmitting && + modified && + (currentLocation.pathname !== nextLocation.pathname || + currentLocation.search !== nextLocation.search) + ); + }); if (blocker.state === 'blocked') { + const handleCancel = () => { + onCancel(); + blocker.reset(); + }; + return ( { id: 'app.components.ConfirmDialog.title', defaultMessage: 'Confirmation', })} - onClose={() => blocker.reset()} + onClose={handleCancel} > @@ -723,7 +741,7 @@ const Blocker = () => { blocker.reset()} variant="tertiary"> + } endAction={ -