Fix erratic scroll-to-right on delete & redraft in Advanced UI (#38116)

app/javascript/mastodon/components/router.tsx

@@ -17,6 +17,9 @@ import { isDevelopment } from 'mastodon/utils/environment';
 interface MastodonLocationState {
   fromMastodon?: boolean;
   mastodonModalKey?: string;
+  // Prevent the rightmost column in advanced UI from scrolling
+  // into view on location changes
+  preventMultiColumnAutoScroll?: string;
 }
 
 export type LocationState = MastodonLocationState | null | undefined;

app/javascript/mastodon/features/status/index.jsx

@@ -255,7 +255,12 @@ class Status extends ImmutablePureComponent {
     const { dispatch, history } = this.props;
 
     const handleDeleteSuccess = () => {
-      history.push('/');
+      history.push('/', {
+        // Preventing the default "scroll to right" on
+        // location change in advanced UI to avoid conflict
+        // with the composer being focused
+        preventMultiColumnAutoScroll: true
+      });
     };
 
     if (!deleteModal) {

app/javascript/mastodon/features/ui/index.jsx

@@ -136,7 +136,9 @@ class SwitchingColumnsArea extends PureComponent {
   }
 
   handleChildrenContentChange() {
-    if (!this.props.singleColumn) {
+    const {preventMultiColumnAutoScroll} = this.props.location.state ?? {};
+
+    if (!this.props.singleColumn && !preventMultiColumnAutoScroll) {
       const isRtlLayout = document.getElementsByTagName('body')[0]
         ?.classList.contains('rtl');
   	  const modifier = isRtlLayout ? -1 : 1;
@@ -156,24 +158,23 @@ class SwitchingColumnsArea extends PureComponent {
     const { signedIn } = this.props.identity;
     const pathName = this.props.location.pathname;
 
-    let redirect;
+    let rootRedirect;
-
     if (signedIn) {
       if (forceOnboarding) {
-        redirect = <Redirect from='/' to='/start' exact />;
+        rootRedirect = '/start';
       } else if (singleColumn) {
-        redirect = <Redirect from='/' to='/home' exact />;
+        rootRedirect = '/home';
       } else {
-        redirect = <Redirect from='/' to='/deck/getting-started' exact />;
+        rootRedirect = '/deck/getting-started';
       }
     } else if (singleUserMode && owner && initialState?.accounts[owner]) {
-      redirect = <Redirect from='/' to={`/@${initialState.accounts[owner].username}`} exact />;
+      rootRedirect = `/@${initialState.accounts[owner].username}`;
     } else if (trendsEnabled && landingPage === 'trends') {
-      redirect = <Redirect from='/' to='/explore' exact />;
+      rootRedirect = '/explore';
     } else if (localLiveFeedAccess === 'public' && landingPage === 'local_feed') {
-      redirect = <Redirect from='/' to='/public/local' exact />;
+      rootRedirect = '/public/local';
     } else {
-      redirect = <Redirect from='/' to='/about' exact />;
+      rootRedirect = '/about';
     }
 
     const profileRedesignRoutes = [];
@@ -194,7 +195,7 @@ class SwitchingColumnsArea extends PureComponent {
       <ColumnsContextProvider multiColumn={!singleColumn}>
         <ColumnsArea ref={this.setRef} singleColumn={singleColumn}>
           <WrappedSwitch>
-            {redirect}
+            <Redirect from='/' to={{pathname: rootRedirect, state: this.props.location.state}} exact />
 
             {singleColumn ? <Redirect from='/deck' to='/home' exact /> : null}
             {singleColumn && pathName.startsWith('/deck/') ? <Redirect from={pathName} to={{...this.props.location, pathname: pathName.slice(5)}} /> : null}