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

开放

#2,692 创建于 2018年7月14日

 (6 条评论) (2 个反应) (0 位负责人)TypeScript (2,167 个派生)batch import
P3Package: coreType: bughelp wanted

仓库指标

星标
 (20,263 个星标)
PR 合并指标
 (PR 指标待抓取)

描述

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

贡献者指南