Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can I prevent tab selection? #57

Open
uriklar opened this issue Apr 5, 2016 · 3 comments
Open

How can I prevent tab selection? #57

uriklar opened this issue Apr 5, 2016 · 3 comments

Comments

@uriklar
Copy link

uriklar commented Apr 5, 2016

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
Copy link
Owner

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
Copy link
Author

uriklar commented Apr 6, 2016

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
Copy link
Owner

#81

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants