How can I prevent tab selection?

[uriklar]

Hi, I've been using your library and loving it! One thing I can't seem to do: I want to add a condition that prevents the user from switching tabs. I tried overriding the onTabSelect prop to use my own function to handle tab selection, but it seems that even though my method is called, the tab selection happens anyway.

Another thing I thought i'd try is event.preventDefault() on the event parameter to prevent the tab from being selected, but when I try that I get the error:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the methodpreventDefaulton a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.

I tried using event.persist() as suggested but that didn't work as well.

Any idea on how I can accomplish preventing tab selection with a condition?

P.S. I'm using React 15

Thanks! Uri

[georgeOsdDev]

Hi,

onTabSelect is called after changing internal state. https://github.com/georgeOsdDev/react-draggable-tab/blob/master/src/components/Tabs.js#L256

So your callback with event.preventDefault() will do nothing.

I think we have 3 ideas to resolve your request.

Idea1: re-set selected tab after onTabSelect by app side. Example:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabs:[
        (<Tab key={'cantSelect'} title={'cantSelect'}></Tab>),
        (<Tab key={'shouldBeSelected'} title={'shouldBeSelected'}></Tab>),
        (<Tab key={'other'} title={'other'}></Tab>)
       ]
  }

  handleTabSelect(e, key, currentTabs) {
    if (key === 'cantSelect'){
       this.setState({selectedTab: 'shouldBeSelected'});   
    } else {
       this.setState({selectedTab: key, tabs: currentTabs});
    }
  }

 render(){
     return (
      <div>
        <Tabs
          selectedTab={this.state.selectedTab ? this.state.selectedTab : 'shouldBeSelected'}
          onTabSelect={this.handleTabSelect.bind(this)}
          tabs={this.state.tabs}
        />
   }
}

Idea 2: Create your own CustomizedTabs component extends Tabs. Actually I'm using customized Tabs component in my project like below. https://gist.github.com/georgeOsdDev/f86a0e81c59a97f8579eb85365a2b4ca You can overwrite handleTabClick in your CustomizedTabs.

Idea 3: Add disabled prop to Tab This idea is not implemented. I'm welcome your PR. But there are some difficult case. When tab is closed and next tab is disabled, which tab should we render?

[uriklar]

Thanks so much for the quick and detailed answer! I guess I'll go with the first option for now and maybe when I have more time I could take this issue. One thing I can't figure out: When I click on a Tab it gets selected before handleTabClick even runs. Where is this selection happening?

EDIT: from what I see the onStart event is being fired when clicking on a tab...

Thanks again, Uri

[georgeOsdDev]

#81