palantir/blueprint

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

Open

#2,692 opened on Jul 14, 2018

View on GitHub
 (6 comments) (2 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P3Package: coreType: bughelp wanted

Description

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!

Expected behavior

Properly aligned initial tab indicator right away.

Possible solution

BLACK MAGIC

Contributor guide