Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
theigor opened this issue May 2, 2018 · 5 comments
Labels

Comments

@theigor
Copy link

theigor commented May 2, 2018

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

@welcome
Copy link

welcome bot commented May 2, 2018

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

@theigor
Copy link
Author

theigor commented May 2, 2018

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!

@levithomason
Copy link
Member

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
Copy link
Author

theigor commented May 6, 2018

openOnTriggerClick is exactly what I was missing. Your comment is right on:

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.

There should be some way to specify this in the docs.

Thanks!

@levithomason
Copy link
Member

Linking #1169

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants