Toggle component needs an event.stopPropagation();

[ssolders]

Problem Description

I'm displaying a list of Toggle-component inside a Tab-component, inside a Dialog.
I have 2 event-handlers, one for changing tab and one for changing a Toggle.

_handleColumnToggle (index, e, visible) {
        e.stopPropagation();
        this.props.dispatch(setColumnVisible(visible, index));
}

 _handleTabChange (tabName) {
        const { rawDataSettings, dispatch } = this.props;
        dispatch(setSettingsTab(tabName));
}

_toggleGridColumns () {
        const { rawDataRawQuery } = this.props,
        self = this,
        columns = rawDataRawQuery.get('columnProps');

        if(columns.size > 0) {
            const styles = {
                block: {
                  maxWidth: 250,
                },
                toggle: {
                  marginBottom: 16,
                },
              };

            return columns.toJS().map((column, index) => {
                return (
                    <div key={index} style={styles.block}>
                        <Toggle key={index}
                          label={column.name}
                          style={styles.toggle}
                          toggled={column.visible}
                          onToggle={self._handleColumnToggle.bind(this, index)}
                        />
                    </div>
                );
            });
        }
    }

<Dialog>
     <Tabs value={selectedTab} onChange={this._handleTabChange}>
         <Tab value="My First Tab" value="tab1">
            { this._toggleGridColumns() }
         </Tab>

        <Tab value="My Second Tab" value="tab2">
           <p>Second tab content</p>
        </Tab>
    </Tabs>
</Dialog>

The issue occurs when I switch a toggle. My toggleHandler is called as expected but the change event also triggers the tabChangeHandler as well but without a valid tabName as parameter.

To solve this I had to change my _handleColumnToggle event handler to this:

    _handleColumnToggle (index, e, visible) {
        e.stopPropagation();
        this.props.dispatch(setColumnVisible(visible, index));
    }

The e.stopPropagation() could probably just be added to the Toggle-component to avoid this kind of behaviour? Took my a while to figure this out, would be good if this could be patched.

Versions

• Material-UI: 0.15.0-alpha.2
• React: 0.14.8
• Browser: Chrome 49.0.2623.112 (64-bit)

[nathanmarks]

@mbrookes Do you think we should make the tabs API more like stepper so that the only controlled option isn't a magic callback on the parent container? (in this case, Tabs).

[lucianosemerini]

In my case, I am trying to do some kind of Wizard with tabs and a Previous/Next set of buttons.

My state has activeTab, showNext and showPrevious.

One function handles the change when clicking a tab, another when clicking on previous/next buttons.

All was working well until I added a textbox in a Tab, and on keyDown it was triggering the onChange of Tabs...

@ssolders workaround helped me, thank you.

Maybe it would be nice to have a wizard component altogether, in my case, at least ?

[acomito]

I am using the non-linear vertical stepper and having some issues with checkboxes resetting.

[oliviertassinari]

Actually, I think that this issue is directly linked to #5210. That should be fixed now.

[LucasBadico]

Guys, this still in need! Having the same issue here.