Semantic-ui-react: Popup: hover behaviour unreliable

Created on 24 Oct 2018  路  5Comments  路  Source: Semantic-Org/Semantic-UI-React

Bug Report

Steps

In the Semantic UI & Semantic UI React examples, go to Popup and try the Flowing Example

  • You should find that on SUI the Popup on hover closes only when your mouse leaves the bounds of the popup content, but on SUIR the popup content closes unpredictably, even when your mouse is within the popup content bounds.
  • I am finding cases in my website where buttons and other interactable components are not able to be interacted with reliably when wrapped in a Popup.

SUI: https://semantic-ui.com/modules/popup.html
SUIR: https://react.semantic-ui.com/modules/popup/

Expected Result

The Popup hover behaviour on SUIR should match SUI.

Actual Result

The SUIR Popup on hover mode unreliably closes, even when the mouse is within the bounds of the popup content.

Version

0.83.0

bug

Most helpful comment

Hello! I've been a heavy user of SUIR for some time and I've been planning to start contributing to this repo.

I've investigated this issue and possibly found a solution, could submit a PR soon.

All 5 comments

You should find that on SUI the Popup on hover closes only when your mouse leaves the bounds of the popup content, but on SUIR the popup content closes unpredictably, even when your mouse is within the popup content bounds.

I tested in Chrome and don't any difference, however SUI has transitions. Can you record a gif? Becuase your issue is not obvious to me.

I am finding cases in my website where buttons and other interactable components are not able to be interacted with reliably when wrapped in a Popup.

It may be similar to https://github.com/Semantic-Org/Semantic-UI-React/issues/3231#issuecomment-432258707

I'm using the latest non-beta version of Firefox:

  • _I am not clicking in either of these recordings, just moving the cursor around_
  • To clarify, in SUIR the popup closes unpredictably, but seems to be based on cursor movement
  • Do you think that the transition is causing the disparity?

SUI:
SUI

SUI React:
SUIR

Now it's more clear, thanks.

+1. Have same issue!

Hello! I've been a heavy user of SUIR for some time and I've been planning to start contributing to this repo.

I've investigated this issue and possibly found a solution, could submit a PR soon.

Was this page helpful?
0 / 5 - 0 ratings