[Autocomplete][MenuItem] Multiple invariant violations when navigating away after touchtap

[EugeneZ]

This seems to have been brought up in #1599 but since nothing happened there I'm opening another issue. Here are the errors:

Here is the code:

    var React        = require('react'),
        FluxMixin    = require('fluxxor').FluxMixin(React),
        History      = require('react-router').History,
        AutoComplete = require('material-ui/lib/auto-complete.js');

    module.exports = React.createClass({
        displayName: 'payee.AddPayee',
        mixins     : [FluxMixin, History],

        getInitialState() {
            return {
                somethingWasTyped: false
            };
        },

        render() {
            return (
                <div style={{margin: ' 0 1em 1em 1em'}}>
                    <AutoComplete floatingLabelText="Add A Payee" fullWidth={true} onUpdateInput={this.onChange} onNewRequest={this.onSubmit}
                                  dataSource={this.props.suggestions} updateWhenFocused={true} animated={false}/>
                </div>
            );
        },

        onChange(text) {
            if (!text) {
                this.getFlux().actions.addPayee.inputFocus();
                this.setState({somethingWasTyped: false});
            } else {
                this.getFlux().actions.addPayee.inputChanged(text);
                this.setState({somethingWasTyped: true});
            }
        },

        onSubmit(text, index, datasource) {
            if (index && this.state.somethingWasTyped) {
                this.getFlux().actions.addPayee.selectTopBiller(text);
            } else if (index) {
                this.getFlux().actions.addPayee.selectSuggestion(text);
            } else {
                this.getFlux().actions.addPayee.payeeSelected(text);
            }
            this.history.pushState(null, '/dashboard/payee/new');
        }
    });

When I wrap the pushState call in a setTimeout the issue goes away, so I'm fairly certain that's the problem. I'll use the workaround for now but thought this might help shed some light on the issue.

[caseychoiniere]

I'm also getting a setState warning on the AutoComplete component. This happens when It's opened and then close with a clickaway.

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the AutoComplete component.

I get this error even if I disable all setState() methods associated with the component.

Example: Even this triggers the setState warning which leads me to believe it's an issue with the core component, not my code.

                           <AutoComplete
                            id="fullName"
                            floatingLabelText="Name"
                            filter={AutoComplete.fuzzyFilter}
                            dataSource={names}/><br/>

[slackday]

I had the same problem with Popover. Tried an ugly hack like setting a timeout but it didn't work.

I inspected the source and found that Popover sets a timeout nextProps.animated is true.

This fixed the problem but caused another when navigating away from the page. Uncaught TypeError: Cannot read property 'componentDidUpdate' of null.

This is caused but having open={this.state.isPopoverOpen} instead always have popover open and check in render if it should render or not it works without errors.

          {isPopoverOpen ? (
            <Popover
              anchorEl={anchorEl}
              onRequestClose={this.handleRequestClose}
              canAutoPosition={false}
              animated={false}
              open
            >
              <Menu>
                ...
              </Menu>
            </Popover>
          ) : null}

However the popover position is wrong since Popover doesn't check position on initial render. There is an open PR which fixes this. #4839

In the meantime I solved the incorrect positioning by setting a timeout and another state variable after ìsPopoverOpen`.

So my handleTouchTap looks like this now...

    this.setState({
      isPopoverOpen: true,
      anchorEl: evn.target,
    });

    setTimeout(() => {
      this.setState({
        noOp: true,
      });
    }, 10);

Obviously this causes another re-render but in my case it's acceptable while a permanent fix in core is available.

[mbrookes]

Fixed in #4839.