Can't get Popover to display in correct position in Dialog

For anyone that comes across this issue with Material UI, there are a couple of things that you can do.

One is to make sure that if you have multiple nested functional components, that your anchorEl / click handlers for the popover are defined within the specific functional component that holds the popover. If you have nested functional components and the parent component holds the state, it will rerender the children on every state change, which can reset the anchorEl reference.

Second - React.memo can prevent unnecessary rerenders on functional components (it only works if props don't change but should still reap performance benefits in child components).

1. Check if there is any display: none; style

2. May be anchorEl used in multiple nested functional components problem

3. Try to use memo concept to prevent component rerender

I have nested elements this is how I solved this without doing anything too extra.

So my main functional component simply returned something like this

const filters = () => {
  const [anchorEl, setAnchorEl] = useState(null)
  const popoverOpen = Boolean(anchorEl)
  const handleTogglePopover = (event: any) => {
    event.preventDefault()
    if (anchorEl === null) {
      setAnchorEl(event.currentTarget)
    } else {
      setAnchorEl(null)
    }
  }
  const SortActions = () => {
    return (
      <Box>
        <MyCustomRadioButton/>
      </Box>
    )
  }
  const FilterButtons = () => {
    return (
      <Box>
        <ButtonBase
          onClick={handleTogglePopover}
          aria-owns={popoverOpen ? 'my-popover-id-name' : undefined}
          aria-haspopup={true}
        >
          {/* contents (this is a comment in html in react)  */}
        </ButtonBase>
        <Popover
          id={'my-popover-id-name'}
          open={popoverOpen}
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'left'
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'left'
          }}
          onClose={handleTogglePopover}
        >
          <SortActions/>
        </Popover>
      </Box>
    )
  }
  return (
    <Box>
      {/* THIS LINE IS THE LINE I CHANGED TO GET IT TO WORK */}
      <FilterButtons/>
    </Box>
  )
}

I changed that line to {FilterButtons()} instead. It looks like the component that is rendering the popover needs to exist within the functional component calling it. However any nested components under do not need to be declared within the calling functional component.

From what I have gathered in looking at many peoples solutions is to use React.memo for this but this worked for me. Something about React re-rendering the popover losing the state when its called as a nested component rather than a function within the component causes the state to be lost? I assume it has to do with how JavaScript works in terms of encapsulation within a function.

I know this is an older question but I know people will still run by this question eventually.

It's also possible to get this error due to what it's saying - you might be trying to use an element that has display: none style as an achorEl for your component, which isn't supported as the underlying logic calculating the position of the anchor element needs it to be visible on screen.