tab resets to first tab onclick event

[aaronucsd]

Hi. I have an onclick event fire from one of my tabs, but on fire, it somehow reset the tab index to go back to the first tab. Say i have 2 tabs, and i'm on the second page of the tab 2, which has Griddle table, when i click on something in one of the griddle's table column ( i have an onclick on an item there ) it triggers the react tab to go back to the first tab vs staying put. I need it to stay put on tab 2 vs somehow route back to tab 1. Any ideas?

const LinkComponent = ({ data, rowData }) => {
  let result = <span></span>;
  if (data) {
    result = (
      <div>
        <span>{rowData.user}</span>&nbsp;
        <span onClick={this.props.onClickUserDetails.bind(this, rowData.user)}>
          <i className='fa fa-info-circle fa-lg'></i>
        </span>
      </div>
    );
  }
  return result;
};
const columnMeta = [
  {
    columnName: 'user',
    order: 1,
    locked: false,
    visible: true,
    customComponent: LinkComponent,
    displayName: 'User ID',
  },

[peterpunk]

I had the same issue, I found that I had:
<Tabs onSelect={this.handleSelect} selectedIndex={0}>

The problem was the selectedIndex={0} I hope this will solve your issue.

[deepaksisodiya]

Thanks @peterpunk
You solve my problem :)

[deepaksisodiya]

Hey, i got this problem,
removing the selectedIndex={0} is not a solution,
You need to set it by state, like

selectedIndex={this.state.selectedTab}

also initialise selectedTab state to your preferred tab.

then on onSelect={this._handleSelect} event of Tabs, set the selectedTab again.

_handleSelect = (index, last) => {
console.log('Selected tab: ' + index + ', Last tab: ' + last);
this.setState({
selectedTab: index
});
};

by doing this, on tab it will not move to another tab by click event :)

[mziwisky]

fyi, what you want is "Controlled Component" behavior -- see https://facebook.github.io/react/docs/forms.html#controlled-components

I have an outstanding PR to implement this, #80

[jeffreygnatek]

works for me, thank you @peterpunk