Semantic-ui: [Popup] `hideOnScroll` doesn’t work with `on: manual`

[Prabhakar-Poudel]

There seems to be problems when using popup with on property set to manual. It does not hide on scroll even if it is set to true, with/without scrollContext set. It does not hide on outside click even when closable property is set. And when I specify hoverable it rather hides the popup after it is hovered and then re position cursor somewhere else.
It feels completely broken with manual show/hide option or am I missing something here?

[vinayakkulkarni]

Dear @Prabhakar-Poudel, As per our Contribution Guide, kindly provide with a test case so that we may further analyse if it's a genuine issue or a bug.

You can fork this jsFiddle and post it here :)

[Prabhakar-Poudel]

Check this fiddle
Points to observe:

1. Hover over popup and move cursor away from it - the popup vanishes
2. Scroll around - popup remains
3. Click outside popup - popup remains

All these are just opposite to what should happen.

[awgv]

It does try to hide it, but then it always falls here; the culprit is isInDOM variable.

[Prabhakar-Poudel]

@Banandrew How about the scroll and hover problems?

[awgv]

@Prabhakar-Poudel That’s about the scrolling, closable property works only with on: 'click', and it only makes sense to use hoverable when it’s on: 'hover'.

[Prabhakar-Poudel]

Lets say I have a table, with 100 cells, I want to show a popup to take some input when clicked on cells. I thought making on: click would do the click and I would reuse the same popup for all cells.
But, when I navigate through the table the popup gets destroyed. So, I had to fallback to manual approach.

@Banandrew

it only makes sense to use hoverable when it’s on: 'hover'.

I assume how popup appears hover/click/focus/manual should have nothing to do with what the behavior of popup is. Both are independent elements and should have their own properties.

[awgv]

@Prabhakar-Poudel If you don’t want your popups be destroyed, use pre-existing HTML, or set preserve to true.

I assume how popup appears hover/click/focus/manual should have nothing to do with what the behavior of popup is. Both are independent elements and should have their own properties.

'manual' setting implies that a developer controls when and how to show or hide a popup, and a 'manual' popup will never close until a developer tells it to, rendering hoverable: true useless.

[kmd1970]

'manual' setting implies that a developer controls when and how to show or hide a popup, and a 'manual' popup will never close until a developer tells it to, rendering hoverable: true useless

It would be nice to have a on : manual popup with an option that allows it to automatically fade/transition after some delay. Otherwise it remains open indefinitely.

[Prabhakar-Poudel]

onShow() {

        $(document).on('click', function(e) {
          if ($(e.target).closest($('.my-popup')).length === 0) {
            $(element.currentTarget).popup('hide');
          }
        });
        $(document).on('keydown', function(e) {
          const escKeyCode = 27;
          if (e.keyCode === escKeyCode) {
            $(element.currentTarget).popup('hide');
          }
        });
      },

I had to do all those bakwas to get the same thing done.
Originally posted in stack overflow.

On similar lines you could hookup a timeout function inside onShow() that closes the popup.

[jlukic]

You can call
```javascript
$('.some.selector').popup('bind close on scroll');
````

to bind the events

See code here
https://github.com/Semantic-Org/Semantic-UI/blob/master/src/definitions/modules/popup.js#L997

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!