From 1b1c7353a8942aacc74308f2cf6954eeef0b7b6e Mon Sep 17 00:00:00 2001 From: ThibG Date: Sun, 25 Aug 2019 15:49:02 +0200 Subject: [PATCH] [Glitch] Fix crash when switching back/from mobile layout Port 2673b89971621b402e95ae737c8b1c2ce16c2d71 to glitch-soc Signed-off-by: Thibaut Girka --- .../glitch/components/column_back_button.js | 14 +++++++++++++- .../flavours/glitch/components/column_header.js | 14 +++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/app/javascript/flavours/glitch/components/column_back_button.js b/app/javascript/flavours/glitch/components/column_back_button.js index 8326cbb79d..05688f867d 100644 --- a/app/javascript/flavours/glitch/components/column_back_button.js +++ b/app/javascript/flavours/glitch/components/column_back_button.js @@ -41,7 +41,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/flavours/glitch/components/column_header.js b/app/javascript/flavours/glitch/components/column_header.js index 43c9f1144c..dd11624290 100644 --- a/app/javascript/flavours/glitch/components/column_header.js +++ b/app/javascript/flavours/glitch/components/column_header.js @@ -235,7 +235,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); + } } }