Warning for unsaved changes when updating a <CheckboxGroupInput>

[fzaninotto]

What you were expecting:

In the simple example, edit a Post, update the Notification recipients and save, then get to the list.

What happened instead:

After clicking on the Save button, an alert shows up and says:

Some of your changes weren't saved. Are you sure you want to ignore them?

Steps to reproduce:

I cannot reproduce the problem in the CodeSandbox, but I get it when running the simple example with make run on Master.

I can only reproducing when updating the Notification Recipients, not any other field.

Environment

• React-admin version: 3.6.1
• Last version that did not exhibit the issue (if applicable): ?
• React version: 16.12
• Browser: Chrome

[0x78f1935]

Experienced the same issue but on 3.6.0, react 16.13.1, Chrome.
I realized that I had added a custom Notification but forgot about it so this issue went over my head.

const MyNotification = props => <ToastContainer
                                    position="bottom-center"
                                    autoClose={5000}
                                    hideProgressBar={false}
                                    newestOnTop
                                    closeOnClick
                                    rtl={false}
                                    pauseOnFocusLoss
                                    draggable={false}
                                    pauseOnHover
                                    closeButton={null}
                                    limit={3}
                                />;

const MyLayout = (props) => <Layout {...props} notification={MyNotification} menu={withRouter(connect(mapStateToProps)(MyMenu))} />;

This broke the undo button and resulted in what OP described.
I think by default the undo button should be separate from the notifications provided in react-admin. It costed me 3 days in total to figure this out :' ).
I do know about the <DeleteWithConfirmButton/> but the undo bar is so much nicer.

Edit:
Since the Notificationbar was replaced, the "cache -> send" to server never fired. This is misleading cause I thought all the time this issue was because there was something with my dataProvider. The execution method just doesn't fire.

[fzaninotto]

I don't see the relationship between the main issue and your comment. The main issue appears in a totally normal application, without custom Notification.

Also, the reason why the "cache -> send" event is triggered by the Notification is because the Notification can delay the event (if you hover on the Notification, it stays displayed longer).

That being said, there may be a way to store the send event logic elsewhere and delay it in case the user hovers on the Notification. I suggest you open another issue for that.

[0x78f1935]

I'm sorry if my post brought confusing. The "Some of your changes weren't saved. Are you sure you want to ignore them?" error happend for me because the save event never fired. If you don't use a custom notification bar I don't see a reason why it shouldn't work and I'm unable to help on this topic. (sorry)

Interesting thought. I don't think that the delay should play a major role on the choice of using this notification bar or an other since Toast also provides this feature. In my situation, because I removed the notification bar, the save event attached to the default notification bar did never trigger.

It might be completely unrelated. But you can check for example if the save method is fired when clicking the button? In my understanding the undo button has a timer on it which fits more in my image. Maybe your save button redirects you to a different page before actual saving onclick? Does your console provide you any logs?

I might open a ticket for my own issue with the navigation bar, however I do have a workaround now.

[fzaninotto]

This is caused by a react-final-form bug: final-form/react-final-form#365. Checking if we can fix it in react-admin.

[fzaninotto]

No, we can't. The fix suggested in the linked issue doesn't work on the dirty field, which is what we're using for the change detection. This bug must be fixed in react-final-form.

[djhi]

Actually the issue does not happen because of the CheckboxGroupInput but because there is two inputs dealing with array values:

• CheckboxGroupInput for notifications
• TagReferenceInput for tags

If you comment the TagReferenceInput, the issue goes away.