title: Semantic ui react dropdown component always stay open
body: <p>I'm trying to use the semantic ui react dropdown component inside a menu component (Meteor app). The component always stays open and, most important, is rendered entirely inside the menu component.</p>
  
  <p><a href="https://i.stack.imgur.com/M9qxo.png" rel="nofollow noreferrer">here a simple image:</a> </p>
  
  <p>and here is the code:</p>
  
  <pre><code>  render() {
  const {
    documents, columns, loading, className,
  } = this.props;
  const options = [
    {
      key: 'default',
      value: 'default',
      text: 'Default grid',
    },
    {
      key: 'edit',
      value: 'edit',
      text: 'Edit grid',
    },
  ];
  return (
    !loading ? (
      &lt;div className="eb-list" &gt;
        &lt;div className="eb-list-toolbar" &gt;
          &lt;Menu borderless icon="labeled" &gt;
            &lt;Menu.Item name="add" onClick={this.addDocument}&gt;&lt;Icon name="add" /&gt;Nuovo&lt;/Menu.Item&gt;
            &lt;Menu.Item name="edit" onClick={this.editDocument}&gt;&lt;Icon name="edit" /&gt;Modifica&lt;/Menu.Item&gt;
            &lt;Menu.Item name="copy"&gt;&lt;Icon name="copy" /&gt;Duplica&lt;/Menu.Item&gt;
            &lt;Menu.Item name="mass"&gt;&lt;Icon name="tasks" /&gt;Modifica di massa&lt;/Menu.Item&gt;
            &lt;Menu.Item name="delete" onClick={this.removeDocuments}&gt;&lt;Icon name="delete" /&gt;Elimina&lt;/Menu.Item&gt;
            &lt;Menu.Item position="right" header name="className" &gt;{className}&lt;/Menu.Item&gt;
            &lt;Dropdown item icon="" open={false} trigger={&lt;Icon name="grid layout" /&gt;} options={options} /&gt;
          &lt;/Menu&gt;
        &lt;/div&gt;
        &lt;div className="eb-list-content" &gt;
          &lt;AutoSizer defaultHeight={200} defaultWidth={500} &gt;
            {({ height, width }) =&gt; (
              &lt;Table
                data={documents}
                columns={columns}
                ref={(t) =&gt; { this.handleTable = t; }}
                onDoubleClickHandler={this.handleDoubleClick}
                height={height}
                width={width}
              /&gt;
          )}
          &lt;/AutoSizer&gt;
        &lt;/div&gt;
      &lt;/div&gt;) : &lt;Loading /&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.eb-list {
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      display: flex;
      flex-direction: column;
  }
  
  .eb-list &gt; .eb-list-content {
      flex: 1 1 auto;
  }
  
  .eb-list &gt; .eb-list-toolbar {
      padding-bottom: 5px;
  }
  </code></pre>
  
  <p>I can't figure out what I'm doing wrong. I observe the same behavior with the subcomponent API.</p>
  
  <p>Can anyone help me please? </p>