floating-ui / popper.js.org Goto Github PK

I'm using @popperjs/core version 2.5.3 to open my component under a dropdown. it works fine but when user opens the popper in small monitors the bottom of the popper will be cut off, so with detectOverflow() you can see the bottom of rect has a positive digit.
I want to open the popper in the middle of the screen so that the user can see the whole popper, I've spent a lot of time to figure out how to change the coordinate of the popper's rect to show it in the middle of the viewport but it seems there is no way to apply a computed coordinate base on the viewport to the popper that's just been opened. could you guide me a solution to address this issue?
thanks in advance.

Steps to reproduce the problem

1. Go to https://popper.js.org/
2. Have adblocker enabled
3. Attempt to read the text shown above

What is the expected behavior?

People are able to read the text

What went wrong?

People are not able to read the text

Any other comments?

Website: https://popper.js.org/

Full screenshot:

Yellow is #FFE69D Background is #FFE4E0

Screenshot from https://accessible-colors.com/:

Thank you in advance for looking into this.

Hi Guys,
I've created a popover component using the popper js, but always initial position is redering wrong. To fix the position i need to scroll so after to interect with the DOM the position change and become perfect.
I'm using classes, fade-in & fade-out to control the visibility follow below the classes.
The animations are using opacity to looks smoother.

&.fade-in { animation: fade-in 0.5s ease; visibility: visible; }
&.fade-out { animation: fade-out 0.5s ease; visibility: hidden; }

Before scroll:

After scroll:

Someone have faced it before or has some idea how to solve it?

https://popper.js.org/docs/v2/tutorial/#arrow suggests this call:

<div id="tooltip" role="tooltip">
  My tooltip
  <div id="arrow" data-popper-arrow></div>
</div>

and

#arrow,
#arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

As far as I can see, the arrow modified assigns the element with id="arrow" to state.elements.arrow. The appyStyles modifier sets state.elements.arrow.style.position='absolute'.

This means, that by following the tutorial the position style for the arrow-element is set twice to absolute: once using CSS and once by Javascript.

Please adjust either the tutorial, not to recommend setting explictly #arrow, #arrow::before { position: absolute }, or the arrow/applyStyle modifiers not to set for the arrow-element position: absolute.

E.g. the example shall set position: absolute for #arrow::before, but not for #arrow itself.

Moved from floating-ui/floating-ui#1528.

https://popper.js.org/docs/v2/modifiers/#custom-modifiers says:

Is it possible to add custom modifiers, written by you, by defining them in the options.modifiers array during a Popper instantation.

It shall start with “It is possible…”.

I'm using Popper.js.org on my wordpress website http://3.97.176.72/locations. when you click view timings under locations, it show a pop up with some timings. It is working fine on laptop screen but when I switch to mobile device or tablet, I'm unable to click and view the popup. Is there any fix about it right now?

here is the code

View Timings

<script>
  const button_mainstreet = document.querySelector('.button_mainstreet');
  const tooltip_mainstreet = document.querySelector('.tooltip_mainstreet');

  const popperInstance_mainstreet = Popper.createPopper(button_mainstreet, tooltip_mainstreet, {
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [10, 8],
        },
      },
    ],
  });

  function show_mainstreet() {
    // Make the tooltip_mainstreet visible
    tooltip_mainstreet.setAttribute('data-show', '');

    // Enable the event listeners
    popperInstance_mainstreet.setOptions((options) => ({
      ...options,
      modifiers: [
        ...options.modifiers,
        { name: 'eventListeners', enabled: true },
      ],
    }));

    // Update its position
    popperInstance_mainstreet.update();
  }

  function hide_mainstreet() {
    // Hide the tooltip
    tooltip_mainstreet.removeAttribute('data-show');

    // Disable the event listeners
    popperInstance_mainstreet.setOptions((options) => ({
      ...options,
      modifiers: [
        ...options.modifiers,
        { name: 'eventListeners', enabled: false },
      ],
    }));
  }

  const showEvents_mainstreet = ['mouseenter', 'focus'];
  const hideEvents_mainstreet = ['mouseleave', 'blur'];

  showEvents_mainstreet.forEach((event) => {
    button_mainstreet.addEventListener(event, show_mainstreet);
  });

  hideEvents_mainstreet.forEach((event) => {
    button_mainstreet.addEventListener(event, hide_mainstreet);
  });
</script>

it is really urgent as I've a demo tonight :)

It appears popperjs was renamed to floating-ui and officially released a few months ago. Although looking at https://popper.js.org/ there is no mention of this change.

I think it would be helpful to have a banner similar in content to what's on the floating-ui readme here, describing this change and directing users to https://floating-ui.com/.

It looks like this event is only for when Amsi initialization fails, so it should be named:

internal static void LogAmsiInitFailedEvent(string message, string context)

Originally posted by @PaulHigin in PowerShell/PowerShell#18727 (comment)

The createPopper link on this page is broken.

First first sentence.

CodeSandbox demo

https://codesandbox.io/s/react-popper-v2x-issue-template-forked-59dv1

Steps to reproduce the problem

Follow tutorial: https://popper.js.org/docs/v2/tutorial/#functionality

1. Both reference and popper are inside of container with position: relative (this is a part of page layout). Without position: relative in ant parents an arrow will be positioned wrong.
2. Popper initialized being display: none, similar to tutorial.
3. User trigger an event, so a popper became display: block, similar to tutorial.

Tutorial lead you right to the bug which wouldn't be fixed (#413).

What is the expected behavior?

A popper positioned correctly. Tutorial helps you. Tutorial does explain or mention a problem with display: none positioning, and doesn't advice well-known buggy things without well-known solutions to workaround them.

What went wrong?

A popper position is wrong at first render. However if you resize viewport or scroll it, a popper will take correct position. You are trying to research what did you do wrong. Tutorial mess you.

Any other comments?

floating-ui/floating-ui#413 was found a time ago after a bug hitted. I suppose, I should to initialize a popper only after it becomes display: block and destroy when it becomes display: none. In theory it should to work.

@popperjs/core: 2.6.0

It happens time to time when I reload page.

edge is undefined

Tutorial shows the example implementation and we can find there:

 show() {
   ...
  modifiers: [
                ...options.modifiers,
                { name: 'eventListeners', enabled: true }, 
            ]

options.modifiers is an array, so the above code keeps on adding new object at each call of show().

The same mistake is in hide() function.

You should change it to something like that:

function enableListeners(modifiers, value) {
   const modifier = modifiers.find((x) => x.name === 'eventListeners');
   if (!modifier) return [...modifiers, { name: 'eventListeners', enabled: open }];
   modifier.enabled = value;
   return modifiers;
}

show() {
   ...
   modifiers: enableListeners(options.modifiers, true)
   ...

I am currently updating react-popper from version 1 to version 2 in my project. This migration has gone smoothly for the most part, except for an issue I've encountered when using popper in a table.

In the previous version, as I scrolled horizontally through the table, a button remained sticky at the end of the currently visible part of the table, with the translate3d value changing linearly as expected. However, in the migrated code, the button now appears at the absolute end of the table instead of being sticky. Additionally, the translate3d value behaves unexpectedly; it initially shows the correct value, but as soon as I scroll slightly to the left, it turns negative, which seems incorrect.

Previous V1 Code:

const PopperElement = memo(({ expanded, style, refProp, placement, update, isBucket, children }) => {
  // eslint-disable-next-line
  useEffect(() => update(), [expanded, isBucket])

  return (
    <div data-placement={placement} style={style} ref={refProp}>
      {children}
    </div>
  )
})

export const PopperContainer = memo(({ children, ...props }) => {
  const popperPlacement = props.mode === 'alerts' ? 'right-start' : 'left-start'

  return (
    <Popper placement={popperPlacement}>
      {({ placement, ref, style, scheduleUpdate }) => {
        return (
          <PopperElement
            placement={placement}
            style={{ zIndex: 8, ...style }}
            refProp={ref}
            isBucket={props.isBucket}
            expanded={R.prop('expanded', props)}
            update={scheduleUpdate}
          >
            {children}
          </PopperElement>
        )
      }}
    </Popper>
  )
})

Migrated Version 2 Code:

export const PopperContainer = memo(
  ({ children, referenceElement, popperElement, setPopperElement, ...props }) => {
    const popperPlacement = props.mode === 'alerts' ? 'right-start' : 'left-start'

    const { styles, attributes, update } = usePopper(referenceElement, popperElement, {
      placement: popperPlacement,
      modifiers: [
        {
          name: 'adaptive',
          enabled: false
        }
      ]
    })

    const expanded = R.prop('expanded', props)
    useEffect(() => {
      if (update) {
        console.log('here update')
        update()
      }
    }, [expanded, props.isBucket, update])

    return (
      <div ref={setPopperElement} style={{ ...styles.popper, zIndex: 8 }} {...attributes.popper}>
        {children}
      </div>
    )
  }
)

I've tried to adjust the styling to force the correct behavior:

    // eslint-disable-next-line no-unused-vars
    const { left, top, bottom, right, ...restStyles } = styles.popper
    restStyles.willChange = 'transform'
    restStyles.left = 0
    restStyles.top = 0
    restStyles.position = 'absolute'

In the previous implementation using react-popper v1, the button maintained a sticky position at the end of the current visible portion of the table during horizontal scrolling, with the translate3d value updating linearly in a predictable manner.

After migrating to react-popper v2, the button no longer behaves as expected. Instead of maintaining its position relative to the viewport, it is now positioned at the absolute end of the table. Additionally, the translate3d values exhibit unexpected behavior: they start with the very end(with current value), but as soon as I begin to scroll left, the values rapidly shift to negative numbers, which is not the intended behavior and seems incorrect.

Originally posted by @Jrarmyjr in #27

@bootstrap

User-Agent Reduction Origin Trial and Dates

I don't know what kind of question this is and report back to you

Both reference and popper are inside of container, when hover from different angles, tooltip's popper position gets changed.
Note: When we hover the tooltip from left, right and bottom angles tooltip appears properly, but when we hover it from top then it breaks and appears randomly somewhere on the screen.

floating-ui/floating-ui#1095 adds the mainAxis and altAxis options to the flip modifier.

https://popper.js.org/docs/v2/modifiers/flip/ does not explain what are these options good for.

Moved from floating-ui/floating-ui#1523.

First of all, thank you for open-sourcing such a wonderful library.

On the page https://popper.js.org/react-popper/v2/react-portals/

As a user using reactjs using classes, I am unable put the example provided, in my context. I am seeing useState and useEffect everywhere and I don't know who it will fit for me in react classes.

Please add an example (if possible) showing how to use react-popper in react classes. Thank you :)

Navigate to the next pages using these buttons and after the first load, it will only display "Home".