Material-ui: [Autocomplete] Autocomplete events bubble up to Tabs controller, causing tab content to disappear

Created on 5 May 2016 · 4Comments · Source: mui-org/material-ui

Problem Description

This seemed to be fixed for the TextField here - https://github.com/callemall/material-ui/issues/2189 - but I am unsure of how to stop propagation on the autocomplete. Any help is appreciated!

Versions

Material-UI: 0.14.4
React: 0.14.7
Browser: Chrome

bug 🐛 Autocomplete

Source

FragginWagon

Most helpful comment

It seems to be possible to hack around this issue by extending AutoComplete component and overriding it's handleChange function:

class MyAutoComplete extends AutoComplete {
    constructor() {
        super();
        const originalHandleChange = this.handleChange;
        this.handleChange = (event) => {
            event.stopPropagation();
            originalHandleChange(event);
        };
    }
}

However this is probably not a good solution.

lutovich on 1 Sep 2016

👍4

All 4 comments

same issue here, did you find any solution to fix it ?? @BinaryWasteland

nwabdou85 on 22 Jul 2016

It seems to be possible to hack around this issue by extending AutoComplete component and overriding it's handleChange function:

class MyAutoComplete extends AutoComplete {
    constructor() {
        super();
        const originalHandleChange = this.handleChange;
        this.handleChange = (event) => {
            event.stopPropagation();
            originalHandleChange(event);
        };
    }
}

However this is probably not a good solution.

lutovich on 1 Sep 2016

👍4

had the same problem with radio buttons nested inside tabs.