fomantic / Fomantic-UI

Fomantic-UI is the official community fork of Semantic-UI
https://fomantic-ui.com
MIT License
3.58k stars 333 forks source link

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

Open mvorisek opened 2 years ago

mvorisek commented 2 years ago

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.

lubber-de commented 2 years ago

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
});
mvorisek commented 2 years ago

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.

lubber-de commented 2 years ago

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