Check if document.getElementById('tabs-bar__portal') is null #11605
Conversation
This seem to prevent TypeError when narrowing browser showing LTL or FTL.
|
I am afraid of two things with this change:
|
|
The root issue is that the portal container and its content can be created in the same React render cycle, so whenever that happens, the target of the portal isn't in the DOM yet. This is obviously an issue, and I guess there ought to be a better way to achieve this, but I can't think of one. Your patch does indeed prevent a crash and it does indeed make the header scroll within the column as opposed to stay on top like it should normally do. One workaround I can think of is to add something to force the component to render again as long as the portal target doesn't exist, with something like: this.setState({ forceReRender: !this.state.forceReRender }); |
| @@ -178,7 +178,9 @@ class ColumnHeader extends React.PureComponent { | |||
| if (multiColumn || placeholder) { | |||
| return component; | |||
| } else { | |||
| return createPortal(component, document.getElementById('tabs-bar__portal')); | |||
| var e = document.getElementById('tabs-bar__portal'); | |||
| if (e === null) return component; | |||
There was a problem hiding this comment.
This branch should force the component to re-render, as otherwise, the column header will not scroll properly.
|
@ThibG thanks so much for looking into this! It seems that the problem is far too much for my knowledge around React. May I close this PR and create an Issue so that you'd be able to take time to come up with a better solution? |
|
Or I could add the workaround I suggested in this PR, if you don't mind? |
|
Reported as an Issue at #11630 and closing this. Cheers! |
While viewing LTL or FTL in multi-column mode, Javascript raises TypeError while narrowing the window:
While I'm not fully sure what I'm doing, this change seems to prevent the error.