Dropdown: list of items overflows its container when using 'simple' and 'allowAdditions' options

[ghost]

Steps

• Add a Semantic-UI-React dropdown component which includes both the 'simple' and the 'allowAdditions' options. Implement the supporting callbacks as normal.
• Using the dropdown UI, about 10 new items to the dropdown list.

<Dropdown
     options={options}
     search
     simple
     allowAdditions
     scrolling
     value={value}
     onAddItem={this.handleAddItem}
/>

Expected Result

• 10 items in the dropdown list, about 6 of which are viewable, the remainder viewable through scrolling.

Actual Result

• the 10 items are all visible, but the last 4 have visibly overflowed the item container and no scrolling is available.

When I remove the 'simple' option from the dropdown component, the scrolling works as expected, but then I am unable to utilize the desired 'simple' UI functionality.

Version

[email protected]

Testcase

https://4xlnjz2m3x.codesandbox.io/

[ghost]

When examining the css of the resulting web page, I observe the following sourced from semantic.min.css:

.ui.simple.active.dropdown>.menu, .ui.simple.dropdown:hover>.menu {
    overflow: visible;
}

When I override your styling with overflow: scroll, the issue is no longer observed.

[levithomason]

Confirmed bug, thanks. CSS, however, is provided by https://github.com/Semantic-Org/Semantic-UI. This issue should be posted over there.

[radulle]

I do not see how this is solvable via CSS. Solution might be to mount dropdown in a portal.