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

This commit is contained in:
matc-pub 2024-06-07 21:51:35 +02:00 committed by GitHub
parent 300ed5fe03
commit 761cd7aa4e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 23 additions and 9 deletions

View file

@ -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)}

View file

@ -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() {

View file

@ -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`,