Выпадающий компонент Semantic UI React всегда остается открытым

Я пытаюсь использовать раскрывающийся компонент семантической реакции пользовательского интерфейса внутри компонента меню (приложение Meteor). Компонент всегда остается открытым и, что наиболее важно, полностью отображается внутри компонента меню.

вот простое изображение:

а вот код:

  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 ? (
    <div className = "eb-list" >
      <div className = "eb-list-toolbar" >
        <Menu borderless icon = "labeled" >
          <Menu.Item name = "add" onClick = {this.addDocument}><Icon name = "add" />Nuovo</Menu.Item>
          <Menu.Item name = "edit" onClick = {this.editDocument}><Icon name = "edit" />Modifica</Menu.Item>
          <Menu.Item name = "copy"><Icon name = "copy" />Duplica</Menu.Item>
          <Menu.Item name = "mass"><Icon name = "tasks" />Modifica di massa</Menu.Item>
          <Menu.Item name = "delete" onClick = {this.removeDocuments}><Icon name = "delete" />Elimina</Menu.Item>
          <Menu.Item position = "right" header name = "className" >{className}</Menu.Item>
          <Dropdown item icon = "" open = {false} trigger = {<Icon name = "grid layout" />} options = {options} />
        </Menu>
      </div>
      <div className = "eb-list-content" >
        <AutoSizer defaultHeight = {200} defaultWidth = {500} >
          {({ height, width }) => (
            <Table
              data = {documents}
              columns = {columns}
              ref = {(t) => { this.handleTable = t; }}
              onDoubleClickHandler = {this.handleDoubleClick}
              height = {height}
              width = {width}
            />
        )}
        </AutoSizer>
      </div>
    </div>) : <Loading />

CSS:

.eb-list {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
}

.eb-list > .eb-list-content {
    flex: 1 1 auto;
}

.eb-list > .eb-list-toolbar {
    padding-bottom: 5px;
}

Я не могу понять, что делаю не так. Я наблюдаю такое же поведение с подкомпонентным API.

Кто-нибудь может мне помочь?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
1 012
1

Ответы 1

Решено!

Я забыл включить определение раскрывающегося списка в custom.semantic.json

{
    "definitions" : {
      "site": true,
      "menu": true,
      "icon": true,
      "dropdown": true,
      "modal": true,
      "list": true
    },
    "themes": {
      "amazon"     : false,
      "basic"      : true,
      "bookish"    : false,
      "bootstrap3" : false,
      "chubby"     : false,
      "classic"    : false,
      "default"    : true
    }
}

Теперь все работает как положено!

Другие вопросы по теме