diff options
-rw-r--r-- | app/javascript/mastodon/components/column_back_button.js | 14 | ||||
-rw-r--r-- | app/javascript/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 cc0e5c07c..d97622705 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 89c5fe723..8a26742b5 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); + } } } |