From 91582937f34c74dd76dabe7253864da8565f227e Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Sun, 25 Aug 2019 15:49:02 +0200
Subject: [PATCH] Fix crash when switching back/from mobile layout (#11655)
Fixes #11630
---
.../mastodon/components/column_back_button.js | 14 +++++++++++++-
.../mastodon/components/column_header.js | 14 +++++++++++++-
2 files changed, 26 insertions(+), 2 deletions(-)
diff --git a/app/javascript/mastodon/components/column_back_button.js b/app/javascript/mastodon/components/column_back_button.js
index cc0e5c07c3..d97622705e 100644
--- a/app/javascript/mastodon/components/column_back_button.js
+++ b/app/javascript/mastodon/components/column_back_button.js
@@ -35,7 +35,19 @@ export default class ColumnBackButton extends React.PureComponent {
if (multiColumn) {
return component;
} else {
- return createPortal(component, document.getElementById('tabs-bar__portal'));
+ // The portal container and the component may be rendered to the DOM in
+ // the same React render pass, so the container might not be available at
+ // the time `render()` is called.
+ const container = document.getElementById('tabs-bar__portal');
+ if (container === null) {
+ // The container wasn't available, force a re-render so that the
+ // component can eventually be inserted in the container and not scroll
+ // with the rest of the area.
+ this.forceUpdate();
+ return component;
+ } else {
+ return createPortal(component, container);
+ }
}
}
diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js
index 89c5fe723f..8a26742b57 100644
--- a/app/javascript/mastodon/components/column_header.js
+++ b/app/javascript/mastodon/components/column_header.js
@@ -178,7 +178,19 @@ class ColumnHeader extends React.PureComponent {
if (multiColumn || placeholder) {
return component;
} else {
- return createPortal(component, document.getElementById('tabs-bar__portal'));
+ // The portal container and the component may be rendered to the DOM in
+ // the same React render pass, so the container might not be available at
+ // the time `render()` is called.
+ const container = document.getElementById('tabs-bar__portal');
+ if (container === null) {
+ // The container wasn't available, force a re-render so that the
+ // component can eventually be inserted in the container and not scroll
+ // with the rest of the area.
+ this.forceUpdate();
+ return component;
+ } else {
+ return createPortal(component, container);
+ }
}
}
--
GitLab