Fomantic-UI icon indicating copy to clipboard operation
Fomantic-UI copied to clipboard

[Popup] improve UX, when popup is opening using hower, it should be not clickable

Open mvorisek opened this issue 2 years ago • 3 comments

Feature Request

On https://ui.agiletoolkit.org/demos/interactive/popup.php demo, it is intuitive to click on the menu item like Browse.

But the menu item opens also on hover. When user hovers the item and click it the same time, it closes.

According to https://fomantic-ui.com/modules/popup.html#/settings the on is default to hover.

Why does the popup react also to click?

Reproducible also on https://fomantic-ui.com/modules/popup.html#popup

When on is set to hover (or default as implied), I propose to non-react on click.

mvorisek avatar Sep 19 '22 19:09 mvorisek

The docs are misleading here. It's the closable setting which is causing this. The closable defines wether a popup is closed when clicking outside of the popup itself. As the default is closable: true and you are clicking on the button itself (which is outside of the popup) it closes via click. So infact you can click anywhere, not only the button. Use closable: false or closable: 'auto' (which will set it to false when on is set to hover) and your issue is solved as the popup will only hide when you leave the hover area.

$('.ui.icon.button').popup({
    closable: false
});

lubber-de avatar Sep 19 '22 20:09 lubber-de

Thank you for your great explanation.

In this case, I would expect no close (like with closable: false) if the click action is originating from the same hovered element which opened it.

mvorisek avatar Sep 19 '22 20:09 mvorisek

In this case, I would expect no close (like with closable: false) if the click action is originating from the same hovered element which opened it.

This might not be desired by everybody, so we should first think about some kind of automatic solution a bit more. In the meantime i fixed the docs by https://github.com/fomantic/Fomantic-UI-Docs/pull/372

lubber-de avatar Sep 19 '22 20:09 lubber-de