Prevent navigation if form is dirty

[Chris-Sytadelle]

Is your feature request related to a problem? Please describe. I want to use a feature that would prevent the user editing a record to navigate to another page (inside or outside the application) when he has modifications that are not saved. I am not sure that this feature is available or not, but I did not find it in the documentation or in the codebase. Moreover, I am not sure of how this feature should be implemented between all the components and layers (redux, router, ui...).

Describe the solution you'd like When modifications are not saved (form is "dirty") and trying to navigate to another page/location, show a modal dialog :

• title : Unsaved Work.
• message : You have unsaved work that will be lost if you navigate to another page.

This modal should propose 3 options :

• Cancel (cancels the navigation, closes the modal, and enable the user to continue modifying the record)
• Save (saves the record and accepts the navigation to the new location/page)
• Leave (does not saves the record and accepts the navigation to the new location/page)

Colors proposal :

• Cancel : grey/default button
• Save : blue/primary button
• Leave : red/warning button

Describe alternatives you've considered

• Prompt component : always prompt when navigating (even is the record is not dirty), but browser's dialog not really pretty and confusing (Yes/No)
• CustomReducer : I was unable to get the status of the form (did not really have time do investigate) and I was confused by the action already dispatched by the router

Additional context

[fzaninotto]

Hi, and thanks for your question. As explained in the react-admin contributing guide, the right place to ask a "How To" question, get usage advice, or troubleshoot your own code, is StackOverFlow.

This makes your question easy to find by the core team, and the developer community. Unlike Github, StackOverFlow has great SEO, gamification, voting, and reputation. That's why we chose it, and decided to keep GitHub issues only for bugs and feature requests.

So I'm closing this issue, and inviting you to ask your question at:

http://stackoverflow.com/questions/tagged/react-admin

And once you get a response, please continue to hang out on the react-admin channel in StackOverflow. That way, you can help newcomers and share your expertise!

[Chris-Sytadelle]

Hum... This is not a "How To" question, but a Feature Request ! I think it should be a very nice to have "out of the box" feature.

[Kmaschta]

Sorry for the brevity.

Thank you for taking the time to fill a duely formed issue, but this feature will not be implemented in the core.

This said, it would be a great addition in the form of an external library! Stack Overflow answerers and I can help you write this addon if you want to. Feel free to ask a question here, I check the questions on a regular basis.

[fzaninotto]

Well, it's both a how to and a feature request ;).

As a how to, look redux-form, it should let you implement it without too much hassle. Again, I invite you to ask the question on stack overflow if you're stuck.

As a feature request, because it's achieveable in userland, we won't consider it for the core for now. We don't add features to the core because they are nice, we add features to the core because it's the only way to implement them. That explains why I closed the issue.

[ArnaudD]

For thoses coming here and looking for a solution, here is mine :

import { useFormState } from "react-final-form";
import { Prompt } from "react-router-dom";

const PreventNavigationIfFormDirty = ({ preventNavigation = false, ...props }) => {
  const { dirty, submitting, submitSucceeded } = useFormState();
  return (
    <Prompt
      when={dirty && !submitting && !submitSucceeded}
      message="Are you sure you want to leave?"
    />
  );
};

export default PreventNavigationIfFormDirty;

then in your forms :

export const PostCreate = (props) => (
  <Create {...props}>
      <SimpleForm>
        <PreventNavigationIfFormDirty />
        <TextInput source="name" />

[fzaninotto]

This feature has been implemented since the issue, see https://marmelab.com/react-admin/CreateEdit.html#warning-about-unsaved-changes

[ArnaudD]

:facepalm: didn't see that... thanks a lot !

[appfr3d]

Updated link: https://marmelab.com/react-admin/Forms.html#warning-about-unsaved-changes