Material-ui: [Tabs] component reacts to child input's "change" event.

[Li0liQ]

<Tabs onChange={(e) => console.log('change', e)}>
    <Tab label='Tab1' value={'1'}>
        <input />
    </Tab>
    <Tab label='Tab2' value={'2'}></Tab>
</Tabs>

Typing anything into input triggers onChange of Tabs component.
Seems like input's change event bubbles up and gets caught by Tabs.

[ghost]

Having the same issue-

value = SyntheticEvent {dispatchConfig: Object, dispatchMarker: ".0.0.2.2.0.0.0.0.1.3.0.2.$0.0.0.0.0.0.2", nativeEvent: Event, target: input#mui-id-1, currentTarget: div…}   

[derekwzheng]

Same here

[glennr]

+1 - using a redux-form component inside a Tab. Here's what it looks like: https://monosnap.com/file/gk4lE4L4Z8GDIyB0daQuobbyC3CQq6

[Naveg]

Try giving the input an onChange handler with a stopPropagation call.

handleInputChange(event) {
  event.stopPropagation();
}

<Tabs onChange={(e) => console.log('change', e)}>
    <Tab label='Tab1' value={'1'}>
        <input onChange={handleInputChange} />
    </Tab>
    <Tab label='Tab2' value={'2'}></Tab>
</Tabs>

[liesislukas]

I have: Tabs > Tab > TextField

Confirmed. TextField onChange Tabs[onChange] is fired too. @Naveg solution works great.

<TextField  onChange={e => e.stopPropagation()} />

[vspiewak]

+1

Tabs > Tab > TextField (or a simple <input type="text" ... />)

Fixed like others with:
<TextField onChange={e => e.stopPropagation()} />

[willemx]

Also have this issue, but cannot use the stopPropagation-workaround because the event is triggered inside a third party component :(
So now I must have a check in the onChange handler for all valid Tab-values...

[tjunnone]

Stopping the event propagation seems to block some normal textfield interactions: double-click to select text, shift-arrow-keys to expand selection etc. so it's not a great workaround.

[oreqizer]

the problem is also when using Redux Form - then I can't stop propagation easily

[clarkie]

@willemx you don't have to check for specific values. Because of the known behaviour of the click propagation you could just check for a string:

handleTabChange: function (value) {
  if (typeof value === 'string') {
    hashHistory.push(`/${value}`)
  }
},

(I'm using redux-form, material-ui and react-router)

[oreqizer]

what I ended up doing was:

which is basically what was suggested, just moved the event stopper to the form's root

[aluksidadi]

Hey guys, so is this a bug or by design?

[oliviertassinari]

Oups, I have never seen this issue before. It was fixed by #5219 and released with v0.16.0.

[jforaker]

FYI - This is still an issue in 0.16.7
(input still fires onChange event for <Tabs /> component)

current workaround:

  doHandleTabChange = (tab) => {
    if (typeof tab !== 'string') return false;
    this.props.doSwitchTab(tab);
  };

[Li0liQ]

@oliviertassinari Is there a regression in 0.16.7?

[oliviertassinari]

Do you have a reproduction test case? I can't reproduce it.

[jforaker]

I do not because as always, there are deps among deps and I can't easily abstract it to a webpackbin. i am using material-ui-chip-input inside the second tab, which might be the culprit. Thanks for the repro link.

[satishchadokar]

Still same issue... is there any good solution?
please let me know