Keep CreatePost mounted when updating URL, fixes focus resets. (#2520)

src/shared/components/post/create-post.tsx

@@ -6,6 +6,7 @@ import {
   voteDisplayMode,
 } from "@utils/app";
 import {
+  bareRoutePush,
   getIdFromString,
   getQueryParams,
   getQueryString,
@@ -90,6 +91,7 @@ interface CreatePostState {
   selectedCommunityChoice?: Choice;
   initialCommunitiesRes: RequestState<ListCommunitiesResponse>;
   isIsomorphic: boolean;
+  resetCounter: number; // resets PostForm when changed
 }
 
 type CreatePostPathProps = Record<string, never>;
@@ -112,6 +114,7 @@ export class CreatePost extends Component<
     loading: false,
     initialCommunitiesRes: EMPTY_REQUEST,
     isIsomorphic: false,
+    resetCounter: 0,
   };
 
   constructor(props: CreatePostRouteProps, context: any) {
@@ -194,6 +197,15 @@ export class CreatePost extends Component<
     }
   }
 
+  componentWillReceiveProps(nextProps: CreatePostRouteProps) {
+    if (bareRoutePush(this.props, nextProps)) {
+      this.setState(s => ({ resetCounter: s.resetCounter + 1 }));
+    }
+    if (this.props.communityId !== nextProps.communityId) {
+      this.fetchCommunity(nextProps);
+    }
+  }
+
   get documentTitle(): string {
     return `${I18NextService.i18n.t("create_post")} - ${
       this.state.siteRes.site_view.site.name
@@ -237,6 +249,7 @@ export class CreatePost extends Component<
           <div id="createPostForm" className="col-12 col-lg-6 offset-lg-3 mb-4">
             <h1 className="h4 mb-4">{I18NextService.i18n.t("create_post")}</h1>
             <PostForm
+              key={this.state.resetCounter}
               onCreate={this.handlePostCreate}
               params={params}
               enableDownvotes={enableDownvotes(siteRes)}

src/shared/components/post/post-form.tsx

@@ -95,7 +95,6 @@ interface PostFormState {
   previewMode: boolean;
   submitted: boolean;
   bypassNavWarning: boolean;
-  urlBlurTimeout?: NodeJS.Timeout;
 }
 
 function handlePostSubmit(i: PostForm, event: any) {
@@ -155,9 +154,6 @@ function copySuggestedTitle({
   suggestedTitle?: string;
 }) {
   if (suggestedTitle) {
-    clearTimeout(i.state.urlBlurTimeout);
-    i.setState({ urlBlurTimeout: undefined });
-
     i.setState(
       s => (
         (s.form.name = suggestedTitle?.substring(0, MAX_POST_TITLE_LENGTH)), s
@@ -192,11 +188,7 @@ function handlePostUrlChange(i: PostForm, event: any) {
 }
 
 function handlePostUrlBlur(i: PostForm, event: any) {
-  i.setState({
-    urlBlurTimeout: setTimeout(() => {
   i.updateUrl(() => i.props.onUrlBlur?.(event.target.value));
-    }, 500),
-  });
 }
 
 function handlePostNsfwChange(i: PostForm, event: any) {
@@ -418,6 +410,14 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     if (this.props.loading && !nextProps.loading) {
       this.setState({ submitted: false, bypassNavWarning: false });
     }
+    if (this.props.params !== nextProps.params && nextProps.params) {
+      const params = nextProps.params;
+      for (const k in params) {
+        if (this.props.params?.[k] !== params[k]) {
+          this.setState(s => ({ form: { ...s.form, [k]: params[k] } }));
+        }
+      }
+    }
   }
 
   render() {

src/shared/routes.ts

@@ -121,6 +121,7 @@ export const routes: IRoutePropsWithFetch<RouteData, any, any>[] = [
     component: CreatePost,
     fetchInitialData: CreatePost.fetchInitialData,
     getQueryParams: getCreatePostQueryParams,
+    mountedSameRouteNavKey: "create_post",
   } as CreatePostFetchConfig,
   {
     path: `/create_community`,