Merge pull request #935 from payloadcms/fix/#930

fix: #930

package.json

@@ -163,7 +163,7 @@
     "react-dom": "^18.0.0",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^5.1.2",
-    "react-router-navigation-prompt": "^1.8.11",
+    "react-router-navigation-prompt": "^1.9.6",
     "react-select": "^3.0.8",
     "react-simple-code-editor": "^0.11.0",
     "react-toastify": "^8.2.0",

src/admin/components/views/collections/Edit/index.tsx

@@ -36,6 +36,7 @@ const EditView: React.FC<IndexProps> = (props) => {
 
   const [fields] = useState(() => formatFields(incomingCollection, isEditing));
   const [collection] = useState(() => ({ ...incomingCollection, fields }));
+  const [redirect, setRedirect] = useState<string>();
 
   const locale = useLocale();
   const { serverURL, routes: { admin, api } } = useConfig();
@@ -51,12 +52,12 @@ const EditView: React.FC<IndexProps> = (props) => {
   const onSave = useCallback(async (json: any) => {
     getVersions();
     if (!isEditing) {
-      history.push(`${admin}/collections/${collection.slug}/${json?.doc?.id}`);
+      setRedirect(`${admin}/collections/${collection.slug}/${json?.doc?.id}`);
     } else {
       const state = await buildStateFromSchema({ fieldSchema: collection.fields, data: json.doc, user, id, operation: 'update', locale });
       setInitialState(state);
     }
-  }, [admin, collection, history, isEditing, getVersions, user, id, locale]);
+  }, [admin, collection, isEditing, getVersions, user, id, locale]);
 
   const [{ data, isLoading: isLoadingDocument, isError }] = usePayloadAPI(
     (isEditing ? `${serverURL}${api}/${slug}/${id}` : null),
@@ -111,6 +112,12 @@ const EditView: React.FC<IndexProps> = (props) => {
     awaitInitialState();
   }, [dataToRender, fields, isEditing, id, user, locale, isLoadingDocument, preferencesKey, getPreference]);
 
+  useEffect(() => {
+    if (redirect) {
+      history.push(redirect);
+    }
+  }, [history, redirect]);
+
   if (isError) {
     return (
       <Redirect to={`${admin}/not-found`} />

yarn.lock

@@ -10531,7 +10531,7 @@ react-router-dom@^5.1.2:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router-navigation-prompt@^1.8.11:
+react-router-navigation-prompt@^1.9.6:
   version "1.9.6"
   resolved "https://registry.npmjs.org/react-router-navigation-prompt/-/react-router-navigation-prompt-1.9.6.tgz#a949252dfbae8c40508671beb6d5995f0b089ac4"
   integrity sha512-l0sAtbroHK8i1/Eyy29XcrMpBEt0R08BaScgMUt8r5vWWbLz7G0ChOikayTCQm7QgDFsHw8gVnxDJb7TBZCAKg==