hide popper when it scrolls outside of its boundaries

[andresgutgon]

What is the expected behavior?

I would expect popper to disappear when element is not visible

Demo

To reproduce this you just need to change height on .example2__scroll-box from 200% to 10000px

Solution

I'll try to do something with a custom modifier. But I think this should be fixed in the core.

[FezVrasta]

Yes probably we should add a "hide when reference is not visible" modifier (maybe with a shorter name ahah).

If you create one please send a PR, it would be a nice addition!

[andresgutgon]

What is the best why to hide popper? I mean. With a modifier you just past data object modified. What should I pass to hide the popper?

[FezVrasta]

I think the applyStyle modifier should be edited a bit to allow custom CSS properties.

[andresgutgon]

Hi, I'm not sure I have time to do the PR now. But this is what I did:

I defined a modifier called hideOnReferenceNotVisibleOnBoundaries and if boundaries is defined check their visibility. Be aware that this code use jQuery dependent and ES6 syntax :)

      /**
       * Check if reference is visible inside boundaries
       *
       * @param {Object} data
       * @param {Object} boundariesElement
       * @return {Boolean}
       */
      function isVisible(data, boundariesElement) {
        const { boundaries, offsets } = data;
        const { top, bottom } = offsets.reference;
        const { height: boundariesHeight} = boundaries;
        const boundariesOffsetTop = $(boundariesElement).offset().top;
        const boundariesBottom = boundariesOffsetTop + boundariesHeight;

        return ((top <= boundariesBottom) && (bottom >= boundariesOffsetTop));
      }

      /**
       * Modifier to hide popper if is outside boundaries
       * If boundaries is not defined we skip the check
       *
       * @param {Object} data
       * @return {Object}
       */
      const hideOnReferenceNotVisibleOnBoundaries = (data) => {
        const boundariesElement = data.instance._options.boundariesElement;

        if (boundariesElement === 'viewport') return data;

        const visible = isVisible(data, boundariesElement);

        // Hide popper
        $(data.instance._popper).toggleClass('js-hide', !visible);

        return data;
      };

[FezVrasta]

That's a bit too hacky to be included in Popper.js... Thanks anyway for your attempt. If someone else is interested please let me know. I can help with it.

[andresgutgon]

What's the hacky part? Just to improve my version :)

[FezVrasta]

We don't use jQuery with Popper.js, and modifiers should never access the DOM to write to it in any way.

Your modifier should edit only the data object, adding maybe a data.hidden property, then, applyStyle modifier should read the value and then hide or not the popper.

[andresgutgon]

Ok, thanks @FezVrasta

[FezVrasta]

@andresgutgon check out #53, it should help with this modifier.

[andresgutgon]

I think we can close this one

[FezVrasta]

Why? The enhancement is not implemented yet

[andresgutgon]

I thought is a user decision to implement that. That you only provide the styles in data to change visibility.

Of you want this modifier/whatever be in the core?

[FezVrasta]

I think it's a feature that would be nice to have in the core.

[FezVrasta]

I've implemented this feature in the v1-dev branch, if someone wants to backport it to the v0 version please use the modifier below and include it before the applyStyles modifier:

function hide(data) {
    var refRect = data.offsets.reference;
    var bound = data.boundaries;

    if (
        refRect.bottom < bound.top ||
        refRect.left > bound.right ||
        refRect.top > bound.bottom ||
        refRect.right < bound.left
    ) {
        data.styles.display = 'none';
    } else {
        data.styles.display = '';
    }

    return data;
}

[ericsakmar]

I'm still seeing the popover after it scrolls outside of the boundaries. Is there anything I need to do to enable this feature?

[FezVrasta]

You have to enable it, it's disabled by default

[ericsakmar]

Cool. How would I enable it? I'm not quite sure I understand. Thanks!

[FezVrasta]

new Popper(ref, pop, {
  modifiers: {
    hide: { enabled: true }
  }
})

[atomiks]

@FezVrasta hide is enabled by default isn't it? 😆

https://popper.js.org/popper-documentation.html#modifiers..hide.enabled

@ericsakmar you need to use something like

.popper[x-out-of-boundaries] {
  display: none;
}

[FezVrasta]

oh, right, thanks

[larsbo]

is this really working?
I use Popper.js 1.15.0 and my popper containers never gets the x-out-of-boundaries attribute when they are not inside the viewport.

nvm, some kind of npm issue... works fine after refreshing node_modules 😄

[nmanikumar5]

Its not working properly @FezVrasta

[JLiu1272]

Hi, @FezVrasta, I tried using the modifier you suggested, and like @nmanikumar5, I am not able to get it to work either.

[dparker2]

For future readers, this is exactly what I added to get this to work (with v2 of popper):

  &[data-popper-reference-hidden='true'] {
    opacity: 0;
    pointer-events: none;
  }

I found that opacity worked better than visibility, which was causing a weird lag for some reason. The docs also don't include the ='true' part in the selector even though that's needed here, since the attribute changes to false instead of actually being removed when the reference is in view.