当项目触发模式并使用关闭按钮时，下拉菜单不会关闭

Question

我创建了一个Dropdown.Item，当按下它会触发一个模态。如果我通过按下模态的“关闭”图标来关闭模态，则模态消失，并且下拉菜单在其后面仍然打开。如果我通过在模态外部单击来关闭模态，则两个模态都将关闭。我希望在两种情况下都关闭下拉菜单。

这是我在语义沙箱中创建的代码，用于重新创建问题

import React from 'react'
import { Dropdown, Modal, Button, Icon, Header } from 'semantic-ui-react'

const DropdownExampleDropdown = () => (
  <Dropdown text='File'>
    <Dropdown.Menu>
      <ModalExampleCloseIcon />
      <Dropdown.Item text='Open...' description='ctrl + o' />
    </Dropdown.Menu>
  </Dropdown>
)

const ModalExampleCloseIcon = () => (
  <Modal trigger={<Dropdown.Item text='Details' />} closeIcon>
    <Header icon='archive' content='Archive Old Messages' />
    <Modal.Content>
      <p>
        Your inbox is getting full, would you like us to enable automatic archiving of old messages?
      </p>
    </Modal.Content>
    <Modal.Actions>
      <Button color='red'>
        <Icon name='remove' /> No
      </Button>
      <Button color='green'>
        <Icon name='checkmark' /> Yes
      </Button>
    </Modal.Actions>
  </Modal>
)

export default DropdownExampleDropdown

如果您单击“文件”下拉菜单，然后单击“详细信息”，则会出现一个模式。在模态中按X会关闭模态，但是下拉菜单的“详细信息”和“打开..”选项仍然可见。如果单击“详细信息”按钮，然后在模态外部单击，则模态消失，下拉列表关闭。您会看到最初显示的“文件”下拉列表，这是我在两种情况下都希望看到的内容。