Menu Close event should be fired AFTER menu is actually closed

[jamesmfriedman]

material-components-web/packages/mdc-menu/foundation.js

Line 255 in a3c2de5

this.adapter_.notifyCancel();

Specifically I'm dealing with this issue in React. Because of the render cycle and the way react works, you'd expect the state of the component to be updated before the event fires, not after.

Currently, when React runs through a new render, the state of the Menu still appears to be open, even though it should be closed which is creating synchronicity issues. My current workaround is to wrap the adapter method in a timeout so it will actually fire after the the menu is really closed.

adapter: {
    notifySelected: function(evtData) {
      const evt = this.emit(MDCMenuFoundation.strings.SELECTED_EVENT, {
        index: evtData.index,
        item: this.items[evtData.index]
      });
      this.props.onClose && this.props.onClose(evt);
    },
    notifyCancel: function() {
      setTimeout(() => {
        const evt = this.emit(MDCMenuFoundation.strings.CANCEL_EVENT, {});
        this.props.onClose && this.props.onClose(evt);
      });
    }
  }