How do I offset Material-UI Popper (popper.js library) position on y-axis?

Question

I am using a material-ui (v 4.9.5) Popper for a "pop-out" menu as above. It's anchorElement is the selected ListItem on the left. I want the Popper to appear flush with the top of the main menu. However it appears 5px short.

If I look at the Chrome Dev Tools I see the following and the 5px value within the translate3d parameters is the issue. If I change the value to 0px within the Dev Tools the problem is solved.

My question is how do I get this to happen through the code. I've tried the following using modifiers for the underlying popper.js and it does nothing.

 <Popper
    modifiers={{
        offset: {
         enabled: true,
         offset: '-5, 0'
    },
    }}
    className={globalMenuStyle.popperStyle}
    placement="right-end"
    open={isPopoverOpen}
    onClose={handleHidingGlobalMenu}
    anchorEl={anchorElement}>
    {popoverMenuItems}
 </Popper>

Even stranger is that if I experiment and try something like this and try the x-axis for the modifiers it shifts along the x-axis. Why does x-axis work and y-axis doesn't ?

modifiers={{
   offset: {
    enabled: true,
    offset: '0, 50'
},
}}

Reproach

If you can share the code, or better try to reproduce this issue in a codesandbox, I'll try to help you – Rhotacism

Answer 1

Version 5.0 of Material UI and up uses Popper 2.0 which has slightly different syntax.

<Popper
    modifiers={[
      {
        name: "offset",
        options: {
          offset: [0, 50],
        },
      },
    ]}
  >
  </Popper>

Following

Answer 2

Use the popperOptions prop to provide the options obj to the popper.js instance like so:

<Popper
   popperOptions={{
      modifiers: {
         offset: {
             offset: '-5,0',
         },
      },
    }}
    ....
</Popper>

Sextain

Hmm that's odd. Try update material-ui maybe? I'm on 4.9.9 and both x and y offsets are working for me. – Sextain

try modifiers: { offset: { enabled: true, offset: '-5,0', }, } – Transducer

Answer 3

This is the fastest way to add offset to the Material Ui popper component.

  <Popper
        open={open}
        anchorEl={anchorRef.current}
        modifiers={{
          flip: {
            enabled: false,
          },
          offset: {
            enabled: true,
            offset: '300,100',
          },
        
      >

the reference here for more info MUI popper.js

Glissando