Material UI, Popover in Popper, anchorEl ignored on first render (then ok, strange)

Question

I am trying to use Material UI Popover in Popper. I have an issue with the anchorEl, it is ignored on the first render. Then if I resize the window, the Popover is placed at the right place.

The problem is reproduced in this sandbox : https://codepen.io/devnullrebooted/pen/WNGBGVy.

const { useState, useRef } = React;

const {
  AddIcon,
  CssBaseline,
  Container,
  Grid,
  makeStyles,
  Paper,
  ClickAwayListener,
  Popper,
  Popover,
  Button
} = MaterialUI;

const useStyles = makeStyles((theme) => ({
  paper: {
    marginTop: theme.spacing(8),
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  popper: {
    zIndex: 1,
    display: "inline-block",

    '&[x-placement*="right"] $arrow': {
      left: 0,
      marginLeft: "-0.9em",
      height: "3em",
      width: "1em",
      "&::before": {
        borderWidth: "1em 1em 1em 0",
        borderColor: `transparent ${theme.palette.background.paper} transparent transparent`
      }
    }
  },
  arrow: {
    position: "absolute",
    fontSize: 7,
    width: "3em",
    height: "3em",
    "&::before": {
      content: '""',
      margin: "auto",
      display: "block",
      width: 0,
      height: 0,
      borderStyle: "solid"
    }
  }
}));

function App() {
  const classes = useStyles();
  const [arrowRef, setArrowRef] = useState(null);
  const [avatarSelectOpened, setAvatarSelectOpened] = useState(false);
  const [editorOpened, setEditorOpened] = useState(false);
  const selectAnchorEl = useRef();
  const popAnchorEl = useRef();

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Button
          onClick={() => setAvatarSelectOpened(true)}
          ref={selectAnchorEl}
          component="h1"
          variant="h5"
          style={{
            border: "3px solid darkblue",
            backgroundColor: "blue",
            color: "white"
          }}
        >
          Avatar selection
        </Button>

        <Grid item xs={12}>
          <ClickAwayListener
            mouseEvent="onMouseDown"
            touchEvent="onTouchStart"
            onClickAway={() => setAvatarSelectOpened(false)}
          >
            <Popper
              className={classes.popper}
              open={avatarSelectOpened}
              anchorEl={selectAnchorEl.current}
              placement={"right-start"}
              modifiers={{
                hide: {
                  enabled: false
                },
                preventOverflow: {
                  enabled: false
                },
                arrow: {
                  enabled: true,
                  element: arrowRef
                },
                offset: {
                  enabled: true,
                  offset: "0, 3em"
                }
              }}
            >
              <span className={classes.arrow} ref={setArrowRef} />
              <Paper variant="outlined">
                <p>Avatar 1</p>
                <p>Avatar 2</p>
                <button
                  ref={popAnchorEl}
                  onClick={() => {
                    setEditorOpened(true);
                  }}
                >
                  +
                </button>
                <Popover
                  onClick={(e) => {
                    e.stopPropagation();
                  }}
                  style={{ zIndex: 2, display: "inline-block" }}
                  open={editorOpened}
                  onClose={() => setEditorOpened(false)}
                  anchorReference="anchorEl"
                  anchorEl={popAnchorEl.current}
                  anchorOrigin={{
                    vertical: "center",
                    horizontal: "center"
                  }}
                  transformOrigin={{
                    vertical: "center",
                    horizontal: "center"
                  }}
                  BackdropProps={{
                    invisible: false,
                    onClick: (e) => {
                      e.stopPropagation();
                      setEditorOpened(false);
                    }
                  }}
                >
                  <Paper style={{ backgroundColor: "red" }}>
                    Avatar Editor
                  </Paper>
                </Popover>
              </Paper>
            </Popper>
          </ClickAwayListener>
        </Grid>
      </div>
    </Container>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

Any pointer to investigate further would be appreciated.

Regards

Fred

question from:https://stackoverflow.com/questions/65889666/material-ui-popover-in-popper-anchorel-ignored-on-first-render-then-ok-stran

Answer 1

Waitting for answers