Initial Tab indicator isn't displayed properly on the very first element when animate is enabled and a react-router Redirect is issued in Electron

ghost commented 6 years ago

Environment

Package version(s): 3.0.1
Browser and OS versions: Electron 3.0.0-beta.2 on Windows 10 Version 1803

Steps to reproduce

import GamePage from "GamePage";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MemoryRouter, Redirect, Route, Switch } from "react-router-dom";

// tslint:disable:no-import-side-effect
import "normalize.css/normalize.css";

import "@blueprintjs/core/lib/css/blueprint.css"          ;
import "@blueprintjs/icons/lib/css/blueprint-icons.css"   ;
import "@blueprintjs/select/lib/css/blueprint-select.css" ;
// tslint:enable:no-import-side-effect

/**
 * Electron renderer process entry point.
 */
ReactDOM.render(
    <MemoryRouter>
        <Switch>
            {/*
                <Route path="/" exact strict component={GameLibrary} />
            */}
            <Route path="/" exact strict render={
                // tslint:disable-next-line:react-this-binding-issue
                (): JSX.Element => {
                    return (<Redirect to="/game" />);
                }} />
            <Route path="/game" exact strict component={GamePage} />
        </Switch>
    </MemoryRouter>,
    document.getElementById("app")
);

import { Tab, Tabs } from "@blueprintjs/core";
import * as React from "react";

// tslint:disable-next-line:variable-name
const GamePage: React.SFC = (): JSX.Element => (
    <Tabs id="TabContent" large>
        <Tab id="News" title="Really Long Name For This Tab" panel={<>News</>} />
        <Tab id="Achievements" title="Achievements" panel={<>Achievements</>} />
        <Tab id="DLC" title="DLC" panel={<>DLC</>} />
        <Tab id="Versions" title="Versions" panel={<>Versions</>} />
        <Tab id="Options" title="Options" panel={<>Options</>} />
        <Tabs.Expander />
    </Tabs>
);

export default GamePage;

Actual behavior

For debugging purposes I have added a redirect from / to /game right away to circumvent navigating manually each time I refresh the window. Unfortunately though, the tab indicator bugs out because REASONS.

As you can see, the indicator isn't initially aligned with the text above, but when clicking through the tabs it is correct. So basically my instant redirect it most likely causing React to have a hickup. By the way, with animate being set to false it works as expected!