Material-UI Tabs inside AutoComplete popover

Is it possible to render the matching data in the AutoComplete popover in the form of Tabs? I may have upto three categories of data matching the input value, that I'd like to display as tabs. Can I combine the Material-UI AutoComplete and Tabs components to achieve this?

The AutoComplete component creates a Menu component for the suggested items. So each suggestion is a component of type MenuItem.

MenuItem component could have dynamic children, and therefore you could add a tabs as the children of the MenuItem. The problem is that any click inside the suggestion popover closes the popover.

If you want to try it out, or maybe hack it somehow (like preventing the click event for tunneling to the popover, and handling the open state manually(?)), here is reproduction code (start typing the word "test" in the input to see suggestions):

import React from 'react';
import AutoComplete from 'material-ui/AutoComplete';
import {Tabs, Tab} from 'material-ui/Tabs';
import MenuItem from 'material-ui/MenuItem';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {deepOrange500} from 'material-ui/styles/colors';

const muiTheme = getMuiTheme({
  palette: {
    accent1Color: deepOrange500,
  },
});

export default class AutoCompleteExampleSimple extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      dataSource: [],
    };
  }

  getTabs() {
   return <MenuItem>
            <Tabs>
              <Tab label="Item One" >
                <div>
                  <h2>Tab One</h2>
                  <p>
                    This is an example tab.
                  </p>
                  <p>
                    You can put any sort of HTML or react component in here. It even keeps the component state!
                  </p>
                </div>
              </Tab>
              <Tab label="Item Two" >
                  <div>
                    <h2>Tab Two</h2>
                    <p>
                      This is another example tab.
                    </p>
                  </div>
              </Tab>
              <Tab
                label="onActive"
                route="/home">
                <div>
                  <h2 >Tab Three</h2>
                  <p>
                    This is a third example tab.
                  </p>
                </div>
              </Tab>
            </Tabs>
          </MenuItem>
  }

  handleUpdateInput(value) {
    this.setState({
      dataSource: [
        {text: 'test', value: this.getTabs()}
      ],
    });
  };

  render() {
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <div>
          <AutoComplete
            hintText="Type anything"
            dataSource={this.state.dataSource}
            onUpdateInput={this.handleUpdateInput.bind(this)}
          />
        </div>
      </MuiThemeProvider>
    );
  }
}