MUI Popper: Placement not working as intended when using disablePortal

Question

I have a Box and upon clicking it, I open a popper that has some inputs. I am using ref and anchorEl to position the popper. All is working fine in this case. Popper opens up in the default bottom position of the ref element.

But in order to use accessibility feature and tab through box to input, I had to set disablePortal={true} so that Tab on the Box will focus on the inputs on the corresponding Popper. But after adding disablePortal={true} the positioning is not working properly. I want to use default bottom, but it doesn't respects the position being provided at all.

Initialising ref for positioning element

  const dropdownRef = useRef(null)

JSX Code is given below:

<Box onClick={showPopper} tabIndex={0}>
   <Box ref={dropdownRef}>
     Random Content 
   </Box>
      <Popper
        disablePortal={true}
        open={isActive}
        anchorEl={dropdownRef?.current ??  null}
        transition
        placement="bottom"
      >
        <Checkbox tabIndex={0} />
      </Popper>
</Box>

Note: I could adjust placement by using style properties like left and top. But thats not a good way since Popper adjust its position also based on available window space, so it's not a good idea. I want that feature to be working as well.

Mincemeat

I think that the content area (height, width) of the parent Box is probably limiting the positioning of the Popper. So the Popper tries to position itself in the limited space, but it appears to user as if it is aligned to the Top position. – Mincemeat

Answer 1

It was a problem with the overflow setting of the ancestor, it dimensions and the content of the Popper.

So if some ancestor has any overflow property set, and the Popper content can't be adjusted into it then the Popper won't position as excepted as it is trying to accommodate to the available dimensions.

Solution: You can bypass parent boundaries by using Poppers modifier property called preventOverflow. Code is given as:

<Popper
  disablePortal={true}
  open={isActive} 
  anchorEl={dropdownRef?.current ??  null}
  transition
  placement="bottom"
  modifiers={{
        preventOverflow: 
          {
              enabled: true, 
              escapeWithReference: true , 
              boundariesElement: 'viewport'}
         }
      }
    >

Now it will appear in hierarchy for accessibility, position properly and adjust to viewport.

Discussion: Positioning Popper issue when overflow is used

Mincemeat