Semantic's Popup does not show up when passing a custom component as trigger

Question

I am quite simply trying to make a toggle button component with an optional popupContent to either render just the button or alternatively have it inside of a <Popup /> component (semantic-ui-react), i.e., have a tooltip show up on hover. I ran into a problem where my component works correctly if I define the button in the trigger prop of Popup but not if I make the button into a separate component and pass that to the prop.

Working example:

return (
  <Popup
    content={popupContent}
    trigger={
      <Button onClick={updateFilters} size="mini" icon basic={!active} primary={active}>
        <Icon name="filter" />
      </Button>
    }
  />
)

What I would like to do - works otherwise but the popup does not show up:

const Toggle = () => (
  <Button onClick={updateFilters} size="mini" icon basic={!active} primary={active}>
    <Icon name="filter" />
  </Button>
)

return popupContent ? <Popup content={popupContent} size="mini" trigger={<Toggle />} /> : <Toggle />

Please note that I have tried this without the ternary; it is not the culprit. What am I missing here?

Answer 1

Turns out the problem is related to this issue: https://github.com/Semantic-Org/Semantic-UI-React/issues/1413

The solution was to wrap the trigger node in a <div> (for me, <span> messed up the tooltip's positioning).

return popupContent ? (
  <Popup
    content={popupContent}
    size="mini"
    trigger={
      <div>
        <Toggle />
      </div>
    }
  />
) : (
  <Toggle />
)