Toast / EuiGlobalToastList - Uncaught TypeError: Cannot read property 'scrollTop' of null

[andrew-goldstein]

An Uncaught TypeError: Cannot read property 'scrollTop' of null in the EuiGlobalToastList component causes a "⚠️ Something went wrong error" in the Kibana SecOps app.

The TypeError can be reproduced in the Toast demo page via the following steps, as shown in the animated gif below:

1. Visit the Toast demo page in Chrome
2. Open the Chrome developer tools, and select the Console tab
3. In rapid succession, click the Add toast to global toast list button 4-5 times
4. Click on the Props tab

An Uncaught TypeError: Cannot read property 'scrollTop' of null is displayed, per the animated gif above.

Clicking on the line number in the Console indicates the following code in global_toast_list.js is the source of the issue:

  startScrollingToBottom() {
    this.isScrollingToBottom = true;

    const scrollToBottom = () => {
      const position = this.listElement.scrollTop; // <--Uncaught TypeError: Cannot read property 'scrollTop' of null

[snide]

Verified on the docs side. Guessing that because the page size changes when the tab is switched, the calculation gets a bit screwy. @thompsongl if you have time this week, do you mind checking on this for Andrew? A related problem is blocking them on some sec ops work.