Popper API - [component]

[arjaym-dev]

Related page

https://mui.com/material-ui/api/popper/

Kind of issue

Unclear explanations

Issue description

I was doing some customization on popper props and it did not showing or displaying the content after adding the Dialog as its root node. Here's the demo repo https://codesandbox.io/p/sandbox/epic-mclaren-k482p2?file=%2Fsrc%2FDemo.js%3A27%2C3-44%2C5

Something like this

const popperProps = {
    open: open,
    transition: true,
    component: Dialog, // I change the root component into dialog
    components: {
      // Do i need to add something in here ? to display the content
    },
  };

return (
    <div>
      <button type="button" onClick={handleClick}>
        Toggle Popper
      </button>
      <Popper {...popperProps}>
        {({ TransitionProps }) => (
          <Fade {...TransitionProps} timeout={350}>
            <Box sx={{ border: 1, p: 1, bgcolor: "background.paper" }}>
              <DialogTitle>This is the dialog title</DialogTitle>
              <DialogContent>This is the dialog content</DialogContent>
              <DialogActions>This is dialog action</DialogActions>
            </Box>
          </Fade>
        )}
      </Popper>
    </div>
  );

But on the api side, there's nothing much to look. Is there a way to achieve what am trying to do.

Context

What am trying to achieve was to display the content without using the Dialog as parent.

Search keywords: popper, popper api, popper component props

[ZeeshanTamboli]

I don't understand your issue or what you're trying to achieve. Why not use a dialog instead of Popper for dialog content? Also, your CodeSandbox isn't public.

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.