Popover arrow addition

[wbobeirne]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I'm trying to add customize my Menu components by adding an arrow to them, but unfortunately it looks like that may not be possible. I had hoped the issue had been covered in #10772, but despite the title of that issue, it was only solved for Poppers, not Popovers. I would just use a Popper, but Select components use Menus which use Popovers, and there doesn't seem to be an escape hatch to override that. I can't use pseudo elements, since the absolutely positioned element is overflow: hidden, and a pseudo element arrow can't sit outside of it.

Ideally there could be a prop similar to Poppers modifiers={{ arrow: { enabled: true }}} that adds an element adjacent to the Paper in Popover somewhere around here: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Popover/Popover.js#L398-L406

Examples 🌈

https://material-ui.netlify.com/components/popper/#scroll-playground

Motivation 🔦

Hopefully this further makes Material UI more themeable.

[oliviertassinari]

@wbobeirne We have no plan to supper such. If you find a good solution, it would be awesome to share it back :)

[aneesha2890]

Hi ,
I implemented the changes and added arrow enable prop and arrow ref still not able to get the arrow on a popper..
is there some way to do it??
arrow: {
enabled: false,
element: arrowRef,
},

[tedpennings]

@aneesha2890 Popover does not use Popper.js so it can't receive the arrow props above. (Tooltip can do this with PopperProps) Popover's parent is Modal which is a direct implementation with React DOM stuff.

Replying for anyone else finding this thread. I was hoping to do this too. I'm sure it can be done with other MUI styling props, but I didn't find anything quick.

[oliviertassinari]

@tedpennings You can use the source of the tooltip as inspiration:

https://github.com/mui-org/material-ui/blob/763266ec723f6e2d426342d33c48e5fc478e7cdb/packages/material-ui/src/Tooltip/Tooltip.js#L21-L58

[markmcdowell]

Not generic but if you override the paper class you can add an arrow (in this case a down arrow):

const styles = (theme: Theme) =>
    createStyles({
        paper: {
            overflowX: "unset",
            overflowY: "unset",
            "&::before": {
                content: '""',
                position: "absolute",
                marginRight: "-0.71em",
                bottom: 0,
                right: 0,
                width: 10,
                height: 10,
                backgroundColor: theme.palette.background.paper,
                boxShadow: theme.shadows[1],
                transform: "translate(-50%, 50%) rotate(135deg)",
                clipPath: "polygon(-5px -5px, calc(100% + 5px) -5px, calc(100% + 5px) calc(100% + 5px))",
            },
        },
    });

...

<Popover classes={{ paper: classes.paper }} >
  {children}
</Popover>

[fir0j]

Here is another working demo: stackoverflow