Material-ui: Ability to prevent Popover overlapping the anchorEl

[enisdenjo]

Before I start, I want to say that you guys did an AWESOME job with the v1 rewrite. I used material-ui before that, at 0.x.x, but I was following the rewrite from the alpha version and I must say, the decisions you made make total sense and they changed the way I look at component composition!

I am not just using material-ui, I am also following you design approach and am using your decoration/styling techniques everywhere, my life became easier, as well as, more concise and I thank you for that. ❤️

---

Now, back to business... First of all, this is a feature request not a bug.

In the Autocomplete context when you don't want your list/items to be inline, you have your <Input /> and the <Popover />. You would use the popover component somewhat like this:

<Popover
  open={open}
  anchorEl={anchorEl} // ref of <Input />
  onClose={this.closePopover}
  disableAutoFocus // required for not losing focus on the <Input /> on open
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
  transformOrigin={{
    vertical: 'top',
    horizontal: 'left',
  }}
>

Where you specify your anchorEl to be the reference to the <Input /> below which you want to open the list.

Now thats all great and it works as expected, but as soon as the width of the screen/window shrinks (or is smaller then the size of the popover content) the <Popover /> needs to reposition and it would eventually OVERLAP the <input />. This would pose a problem since you would not see the text that you are typing in the <input />.

Is there a possibility to prevent the <Popover /> from overlapping the anchorEl (move it to the right or left instead of locking to the origins)? Or if not, how would one approach said problem?

Best regards,
Denis

[oliviertassinari]

@enisdenjo You must have a warning in your console:
https://github.com/mui-org/material-ui/blob/fe4b9fba3a88309ae2b55ee20e39c6a4ff06449d/packages/material-ui/src/Popover/Popover.js#L237-L244
Follow the instruction and you should be good :).

[enisdenjo]

I am not getting that warning. What does that have to do with this issue?

[oliviertassinari]

@enisdenjo Alright, can you provide a live example, a codesandbox can do it.

[oliviertassinari]

Is there a possibility to prevent the from overlapping the anchorEl (move it to the right or left instead of locking to the origins)? Or if not, how would one approach said problem?

@enisdenjo Do you mean that you want to disable the feature that prevents the popover from being partially hidden?

[enisdenjo]

I made a codesandbox example here showing the behavior. Lets say your autocomplete component appears in a list, as you try opening the autocomplete popover nearing the bottom you'll notice that the popover covers the autocomplete input, preventing you from seeing what you are typing!

Now of course I can change popover origin to the right, but it would be nice if it opens from the bottom by default and if its about to overlap the input it moves to the right (or next available positon).

[oliviertassinari]

@enisdenjo Thanks for the codesandox, this confirms what I thought. You are looking for an option to disable the offscreen shifting logic:
https://github.com/mui-org/material-ui/blob/a2eb975c00b3842c8e09641b135f81a7dcf494d2/packages/material-ui/src/Popover/Popover.js#L158-L187
However, the popover component wasn't designed for a use case with the input, better rely on something else.

[dalinarkholin]

@enisdenjo What did you end up doing here? Also @oliviertassinari love the work you have put in to material-ui, but I might have to disagree here. Do you have any objections to the Menu having an option to "disable the offscreen shifting logic" other than that it wasn't designed for it?

I have also built a custom AutoComplete using TextField and Menu. Just now running into this minor issue.

[oliviertassinari]

@dalinarkholin This discussion is old now. We have new issues to improve the Popover component. You are mentioning the AutoComplete use case, maybe you need the Popper component instead like in our demos?

[dalinarkholin]

@oliviertassinari that's exactly what I was looking for. My mistake. Thanks :)