{"action":"created","issue":{"url":"https://api.github.com/repos/mui-org/material-ui/issues/12469","repository_url":"https://api.github.com/repos/mui-org/material-ui","labels_url":"https://api.github.com/repos/mui-org/material-ui/issues/12469/labels{/name}","comments_url":"https://api.github.com/repos/mui-org/material-ui/issues/12469/comments","events_url":"https://api.github.com/repos/mui-org/material-ui/issues/12469/events","html_url":"https://github.com/mui-org/material-ui/issues/12469","id":349625836,"node_id":"MDU6SXNzdWUzNDk2MjU4MzY=","number":12469,"title":"TabIndicator does not move under Tab with component Link","user":{"login":"Johnz86","id":2708520,"node_id":"MDQ6VXNlcjI3MDg1MjA=","avatar_url":"https://avatars2.githubusercontent.com/u/2708520?v=4","gravatar_id":"","url":"https://api.github.com/users/Johnz86","html_url":"https://github.com/Johnz86","followers_url":"https://api.github.com/users/Johnz86/followers","following_url":"https://api.github.com/users/Johnz86/following{/other_user}","gists_url":"https://api.github.com/users/Johnz86/gists{/gist_id}","starred_url":"https://api.github.com/users/Johnz86/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Johnz86/subscriptions","organizations_url":"https://api.github.com/users/Johnz86/orgs","repos_url":"https://api.github.com/users/Johnz86/repos","events_url":"https://api.github.com/users/Johnz86/events{/privacy}","received_events_url":"https://api.github.com/users/Johnz86/received_events","type":"User","site_admin":false},"labels":[{"id":796834793,"node_id":"MDU6TGFiZWw3OTY4MzQ3OTM=","url":"https://api.github.com/repos/mui-org/material-ui/labels/support","name":"support","color":"cccccc","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-08-10T19:07:06Z","updated_at":"2018-08-11T00:49:22Z","closed_at":"2018-08-11T00:48:01Z","author_association":"NONE","body":"I am trying to implement a ```Link``` with ```Tabs``` ```Tab``` components. My problem is that tab indicator under custom tab is not working. I did the following: \r\n```typescript\r\nimport { ClassNameMap } from '@material-ui/core/styles/withStyles';\r\nimport Tab from '@material-ui/core/Tab/Tab';\r\nimport * as React from 'react';\r\nimport { Link, LinkProps } from 'react-router-dom';\r\n\r\ninterface LinkTabProps extends LinkProps {\r\n  text: string;\r\n  classes: Partial<ClassNameMap<string>>;\r\n}\r\n\r\nexport default class LinkTab extends React.Component<LinkTabProps,{}> {\r\n    public renderLink = (itemProps: LinkProps) => <Link to={this.props.to} {...itemProps} />;\r\n  \r\n    public render() {\r\n      return (\r\n        <Tab\r\n        disableRipple\r\n        classes={this.props.classes}\r\n        label={this.props.text}\r\n        component={this.renderLink}\r\n        />\r\n      );\r\n    }\r\n  }\r\n```\r\nAnd I use it like this:\r\n```typescript\r\nimport withStyles, { StyleRulesCallback, WithStyles } from '@material-ui/core/styles/withStyles';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport * as React from 'react';\r\nimport LinkTab from './link-tab';\r\n\r\nconst styles: StyleRulesCallback = theme => ({\r\n    root: {\r\n        backgroundColor: theme.palette.background.default,\r\n        flexGrow: 1,\r\n        width: '100%'\r\n    },\r\n    tabRoot: {\r\n        fontFamily: [\r\n            '-apple-system',\r\n            'BlinkMacSystemFont',\r\n            '\"Segoe UI\"',\r\n            'Roboto',\r\n            '\"Helvetica Neue\"',\r\n            'Arial',\r\n            'sans-serif',\r\n            '\"Apple Color Emoji\"',\r\n            '\"Segoe UI Emoji\"',\r\n            '\"Segoe UI Symbol\"',\r\n        ].join(','),\r\n        // tslint:disable-next-line:object-literal-sort-keys\r\n        '&:hover': {\r\n            color: '#EC6602',\r\n            opacity: 1,\r\n        },\r\n        '&$tabSelected': {\r\n            fontWeight: 'bold',\r\n        },\r\n        '&:focus': {\r\n            color: '#D85808',\r\n        },\r\n        fontWeight: theme.typography.fontWeightRegular,\r\n        marginRight: theme.spacing.unit * 4,\r\n        minWidth: 72,\r\n        textTransform: 'initial',\r\n    },\r\n    tabSelected: {},\r\n    tabsIndicator: {\r\n        backgroundColor: '#D85808',\r\n    },\r\n    typography: {\r\n        padding: theme.spacing.unit * 3,\r\n    },\r\n});\r\n\r\ninterface PropsState {\r\n    value: number;\r\n}\r\n\r\nclass NavigationTabs extends React.Component<WithStyles<string>, PropsState> {\r\n    public state = {\r\n        value: 0,\r\n    };\r\n\r\n    public handleChange = (event: React.ChangeEvent<{}>, value: any) => {\r\n        this.setState({ value });\r\n    };\r\n\r\n    public render() {\r\n        const { classes } = this.props;\r\n        const { value } = this.state;\r\n        const tabStyle = { root: classes.tabRoot, selected: classes.tabSelected };\r\n        return (\r\n            <div className={classes.root}>\r\n                <Tabs\r\n                    value={value}\r\n                    onChange={this.handleChange}\r\n                    classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}\r\n                >   \r\n                    <LinkTab to=\"/import\" text=\"Import\" classes={tabStyle} />\r\n                    <LinkTab to=\"/inbox\" text=\"Inbox\" classes={tabStyle} />\r\n                    <LinkTab to=\"/repository\" text=\"Repository\" classes={tabStyle} />\r\n                    <LinkTab to=\"/collection\" text=\"Collection\" classes={tabStyle} />\r\n                    <LinkTab to=\"/administration\" text=\"Administration\" classes={tabStyle} />                                     \r\n                </Tabs>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n\r\nexport default withStyles(styles)(NavigationTabs);\r\n```\r\nNow the problem is that tabIndicator for selected tab does not move under the component. How can I make it work together with custom Link?"},"comment":{"url":"https://api.github.com/repos/mui-org/material-ui/issues/comments/412238927","html_url":"https://github.com/mui-org/material-ui/issues/12469#issuecomment-412238927","issue_url":"https://api.github.com/repos/mui-org/material-ui/issues/12469","id":412238927,"node_id":"MDEyOklzc3VlQ29tbWVudDQxMjIzODkyNw==","user":{"login":"oliviertassinari","id":3165635,"node_id":"MDQ6VXNlcjMxNjU2MzU=","avatar_url":"https://avatars2.githubusercontent.com/u/3165635?v=4","gravatar_id":"","url":"https://api.github.com/users/oliviertassinari","html_url":"https://github.com/oliviertassinari","followers_url":"https://api.github.com/users/oliviertassinari/followers","following_url":"https://api.github.com/users/oliviertassinari/following{/other_user}","gists_url":"https://api.github.com/users/oliviertassinari/gists{/gist_id}","starred_url":"https://api.github.com/users/oliviertassinari/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oliviertassinari/subscriptions","organizations_url":"https://api.github.com/users/oliviertassinari/orgs","repos_url":"https://api.github.com/users/oliviertassinari/repos","events_url":"https://api.github.com/users/oliviertassinari/events{/privacy}","received_events_url":"https://api.github.com/users/oliviertassinari/received_events","type":"User","site_admin":false},"created_at":"2018-08-11T00:49:22Z","updated_at":"2018-08-11T00:49:22Z","author_association":"MEMBER","body":"@Johnz86 Here is how I do it with Next.js:\r\n```jsx\r\nimport React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport Tabs from '@material-ui/core/Tabs'\r\nimport Tab from '@material-ui/core/Tab'\r\nimport { withRouter } from 'next/router'\r\n\r\nclass NavTabs extends React.Component {\r\n  constructor(props) {\r\n    super(props)\r\n\r\n    this.state = {\r\n      route: this.props.router.route,\r\n    }\r\n  }\r\n\r\n  state = {}\r\n\r\n  componentWillUnmount() {\r\n    clearTimeout(this.timeout)\r\n  }\r\n\r\n  handleChange = (event, route) => {\r\n    this.setState({\r\n      route,\r\n    })\r\n\r\n    clearTimeout(this.timeout)\r\n    this.timeout = setTimeout(() => {\r\n      this.props.routes.Router.pushRoute(route)\r\n    }, 250)\r\n  }\r\n\r\n  timeout = null\r\n\r\n  render() {\r\n    const { navRoutes, Link } = this.props\r\n\r\n    return (\r\n      <Tabs\r\n        onChange={this.handleChange}\r\n        indicatorColor=\"primary\"\r\n        scrollable\r\n        scrollButtons=\"off\"\r\n        value={this.state.route}\r\n      >\r\n        {navRoutes.map(routeInfo => (\r\n          <Tab\r\n            component={linkProps => (\r\n              <Link\r\n                {...linkProps}\r\n                variant=\"naked\"\r\n                route={routeInfo.route}\r\n                onClick={event => {\r\n                  // ignore click for new tab / new window behavior\r\n                  // The logic was taken from https://github.com/zeit/next.js/blob/0989ecc2237f2f1edecea2f08ad55978d28c8c54/lib/link.js#L45\r\n                  if (\r\n                    event.metaKey ||\r\n                    event.ctrlKey ||\r\n                    event.shiftKey ||\r\n                    (event.nativeEvent && event.nativeEvent.which === 2)\r\n                  ) {\r\n                    return\r\n                  }\r\n\r\n                  event.preventDefault()\r\n                  linkProps.onClick(event)\r\n                }}\r\n              />\r\n            )}\r\n            value={routeInfo.route}\r\n            key={routeInfo.route}\r\n            label={routeInfo.label}\r\n          />\r\n        ))}\r\n      </Tabs>\r\n    )\r\n  }\r\n}\r\n\r\nNavTabs.propTypes = {\r\n  Link: PropTypes.any.isRequired,\r\n  navRoutes: PropTypes.arrayOf(\r\n    PropTypes.shape({\r\n      label: PropTypes.node.isRequired,\r\n      route: PropTypes.string.isRequired,\r\n    })\r\n  ),\r\n  router: PropTypes.shape({\r\n    route: PropTypes.string.isRequired,\r\n  }),\r\n  routes: PropTypes.shape({\r\n    Router: PropTypes.object.isRequired,\r\n  }).isRequired,\r\n}\r\n\r\nexport default withRouter(NavTabs)\r\n\r\n```"}}
{"actor":{"display_login":"oliviertassinari"}}