hide popper when it scrolls outside of its boundaries about floating-ui HOT 24 CLOSED

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.

from floating-ui.

@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;
}

from floating-ui.

oh, right, thanks

from floating-ui.

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!

from floating-ui.

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?

from floating-ui.

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

from floating-ui.

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;
      };

from floating-ui.

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.

from floating-ui.

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

from floating-ui.

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.

from floating-ui.

Ok, thanks @FezVrasta

from floating-ui.

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

from floating-ui.

I think we can close this one

from floating-ui.

Why? The enhancement is not implemented yet

from floating-ui.

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?

from floating-ui.

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

from floating-ui.

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;
}

from floating-ui.

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

from floating-ui.

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

from floating-ui.

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

from floating-ui.

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

from floating-ui.

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 😄

from floating-ui.

Its not working properly @FezVrasta

from floating-ui.

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

from floating-ui.