Edit refreshes dirty forms if tab is backgrounded

[carlfreeland]

What you were expecting:
Hidden tabs showing Create or Edit do not refresh after 5 minutes if the form is dirty.

What happened instead:
useRefresh() refreshes dirty forms as well as pristine forms, losing the edits. #5152 attempted to fix the bug but has an error in implementation.

Steps to reproduce:

Repro can be done with a standard simple example https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple but you have to open the application in a new browser window to be able to open tabs.

1. Using any Edit form, change a field value in order to dirty the form
2. Change to a different tab
3. Wait at least 5 minutes
4. Return to the original tab
5. Form will attempt refresh upon return, prompting with the unsaved changes dialog. If not using the warnWhenUnsavedChanges, the unsaved changes are automatically lost.

Related code:

react-admin/packages/ra-core/src/dataProvider/useRefreshWhenVisible.ts

Line 31 in 19deccf

document.addEventListener('visibilitychange', handleVisibilityChange, {

adds a listener with {capture: true}
while

react-admin/packages/ra-core/src/dataProvider/useRefreshWhenVisible.ts

Line 35 in 19deccf

document.removeEventListener(

attempts to remove a listener without {capture: true}. Per MDN, the capture option must match or removal will fail. Thus dirtying the form leaves old listeners that end up triggering the refresh erroneously.

Other information:

To fix, pass {capture: true} to the removeEventListener call

Environment

• React-admin version: 3.8.5
• Last version that did not exhibit the issue (if applicable): unknown
• React version: 16.13.1
• Browser: Version 85.0.4183.102 (Official Build) (64-bit) on MacOSX 10.14.6

[djhi]

Indeed, we missed this one when fixing a similar issue in #5212. Thanks for reporting!