Material-ui: [Tabs] Closable Tabs.

[alitaheri]

It would be great if tabs had a prop like isClosable: boolean and corresponding events:

• Called when the close icon is clicked before the tab is closed: closing: (value) => boolean or closing: (e:{preventDefault: () => void, value}) => void
• Called after the tab is closed: closed: (value) => void

The value refers to the value from controlled tabs.
This feature is great for applications that work with documents.

[alitaheri]

This cal be implemented leveraging the label property on Tab component since it can accept Element now.

[delineated]

This issue may be resolved, but it would be great to have a working example.

[alitaheri]

@delineated Actually it would work before Tab started using button it's not impossible to implement as it is, and since the specs don't talk about it I decided to solve it differently ( put close somewhere else ). What you can do though, is probably rewrite Tab and have it contain a close button next to it's actual button.

[delineated]

Thank you for the reply. I was hoping to use the onChange event to somehow close the tab, but yeah definitely seems like rewriting Tab will be the way to go.

[delineated]

Except, my team doesn't want to rewrite Tab or any part of material-ui. Is there any component within material-ui that allows you to close it (apart from the appbar)?

[alitaheri]

No there isn't unfortunately. If your team is open to it, it might not be a bad idea to provide the functionality in the Tab component with a prop to enable/disable it.

[delineated]

I'll pass that along, thank you.

[zxmarcos]

I solved this problem this way:

<Tab component="div" label={
  <span>
    title
    <IconButton onClick={...}>
      <Close/>
    </IconButton>
  </span>
} />

Render tab component as div or other DOM element, so you can put button inside it.

[GermanBluefox]

I solved this problem this way:

<Tab component="div" label={
  <div>
      title
      <IconButton onClick={...}>
      <Close/>
      </IconButton>
  </div>
} />

Render tab component as div or other DOM element, so you can put button inside it.

But this does not work for Firefox

[chrisdel101]

I am trying to close a tab and came across this post. I've been stuck and can't solve the problem. I posted it here https://stackoverflow.com/questions/54508683/how-to-target-child-covered-by-parent-overlay-in-material-ui

[fsdevblog]

@chrisdel101

you have to use handler of onChange function, and read e.target. If e.target from CloseIcon - e.preventDefault(); What I mean:

handleTabChange(e, tab) {

    if (e.target.tagName !== 'DIV') { // Our label wrapped by div tag, so, if it isn't true - click made to specific buttons or icons and etc...
      e.preventDefault();
      return;
    }

    const { onTabChange } = this.props;
    onTabChange(tab);
  }

[shaktish]

Hi @fsdevblog,

preventing div tag doesn't work in IE11.

IE11 doesn't identify/target nested tags, so it stops with first tag that is button so basically you can't switch tabs with this approach.