[Tabs] component reacts to child input's "change" event.

<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.

[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>

[oreqizer]

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