Popup: when on="hover" with a mouseEnterDelay, a click should not show the popup before delay

Steps

Using the hover example here - https://react.semantic-ui.com/modules/popup#popup-example-hover, modify it to add a mouseEnterDelay like so:

const PopupExampleHover = () => (
  <Popup
    trigger={<Button icon='add' content='Add a friend' />}
    content='Sends an email invite to a friend.'
    on='hover' mouseEnterDelay={5000}
  />
)

Expected Result

If you enter the button, click it and move off of it, all before 5000ms, the popup should not show up.

Actual Result

The popup shows up immediately on click regardless of delay. The problem here is that Popup is often used to show additional helpful information and for a person that knows the UI, it can get very annoying to have it pop up all the time.

Version

0.80.0

[levithomason]

This is a little confusing as our docs for inherited props are not clear. The props for configuring the popup’s open/close behavior come from the underlying portal props.

Note, the mouse enter delay is the delay before allow the mouseenter event to open the popup.:

mouseEnterDelay  {number}  Milliseconds to wait before opening on mouse over

https://react.semantic-ui.com/addons/portal

What you are describing would be a mouseClickDelay. I’m not sure this makes sense as the popup would open 5 seconds after the user clicked it. This could be problematic for many reasons.

You may be looking to disable open on click, openOnTriggerClick={false}. This way the popup only opens on mouse over after 5 seconds, but not when the user clicks the popup.

Hope that helps!

[theigor]

Also, I opened it in this project rather than the main semantic-ui project because it looks like the on and the mouseEnterDelay properties are specific to semantic-ui-react.

Thanks!