palantir/blueprint
在 GitHub 查看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 建立於 2018年7月14日
P3Package: coreType: bughelp wanted
描述
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