Semantic-ui-react: Floating dropdown with button doesn't behave properly

[jtokoph]

Steps

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

const options = [
  { key: 'edit', icon: 'edit', text: 'Edit Post', value: 'edit' },
  { key: 'delete', icon: 'delete', text: 'Remove Post', value: 'delete' },
  { key: 'hide', icon: 'hide', text: 'Hide Post', value: 'hide' },
]

const DropdownExampleFloating = () => (
  <Button.Group color='teal'>
    <Button>Save</Button>
    <Dropdown options={options} floating button className='icon' />
  </Button.Group>
)

export default DropdownExampleFloating

Expected Result

Above screenshot from: https://semantic-ui.com/modules/dropdown.html

Actual Result

The text of the dropdown sections shows up in the button area.

Above screenshots from: https://react.semantic-ui.com/modules/dropdown#dropdown-example-floating

Version

0.68.4

[layershifter]

@jtokoph Thanks for your eyes. It's happens because Dropdown will always render text which will contain a current value or a trigger element.

Here is workaround for this issue, however it's a very dirty solution.

  <Button.Group color='teal'>
    <Button>Save</Button>
    <Dropdown options={options} floating button className='icon' trigger={<div />} />
  </Button.Group>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.