[Popover] setting modal prop to false doesn't do anything

[stevewillard]

According to the docs, you can render a Popover without the effects of a Modal.

https://material-ui-1dab0.firebaseapp.com/api/popover/

If true, the Popover will be rendered as a modal with scroll locking, 
focus trapping and a clickaway layer beneath

I looked at the source, and the prop isn't actually used
https://github.com/callemall/material-ui/blob/v1-beta/src/Popover/Popover.js#L368

Tech	Version
Material-UI	1.0.0-beta.10
React	15.6.1
browser	Chrome 61
etc

[oliviertassinari]

The feature was never implemented as far as I can see.

[oliviertassinari]

I have removed the property from the documentation as it's not implemented. Also, implementing such feature would most likely require starting from scratch and using react-popper to keep the element correctly positioned while scrolling. This is a component that we are going to need for the drop-down part of the specification. I think that it's out of the scope of this issue.

[jamesst20]

As of Beta 18, is there something we can do to set modal to false? I would like to make an Input with suggestions under (Popover-->List). Sadly, as soon as the Popover appears, the input lose the focus and we can't write on it.

[oliviertassinari]

@jamesst20 The Popover component wasn't designed for this use case. Instead, you can use react-popper as demonstrated in the documentation: https://material-ui.com/demos/popovers/#mouse-over-interaction.

[jamesst20]

Thank you for your fast reply. I will have a look into it !

Thanks

Edit: Works flawlessly !

[turnerhayes]

I'm having a similar use case; I have dropdowns (popovers) that are triggered by buttons next to each other. I would like it to work such that, if you open one, then you click the other button while the first is open, it will switch to the other popover, without having to click twice (once to dismiss the first popover and then again to open the second).

[turnerhayes]

@oliviertassinari Should I create a new issue with this use case?

[oliviertassinari]

@turnerhayes Isn't it the same use case than this issue? #8202 (comment) should answer your problem.

[turnerhayes]

My understanding of that use case is that it involves maintaining focus in an associated input. My use case is different in that interaction occurs entirely within the popup, with the exception of clicking an icon outside. I'm sure I could make it work with react-popper, but it seems (from my perspective) to be a useful variant of the Popover component--the initial presence of a modal prop would seem to suggest that someone initially thought the same.

I am working on moving a project from Reactstrap to Material UI, and was previously using their Dropdown component; maybe Material UI needs an analog of this component instead of modifying Popover. Are there any such plans on the roadmap?

[oliviertassinari]

@turnerhayes Thank you for providing more information. I do think that it's a problem it's worth fixing in the core of Material-UI. Yes, we miss the Drowdown use case. The specification isn't very specific about it: https://material.io/guidelines/components/buttons.html#buttons-dropdown-buttons. I found one benchmark so far: https://next.vuetifyjs.com/components/menus. Anyway. I think that it would be great to have a new issue for this. Do you want to open one? :)

[turnerhayes]

Sure, I'll open one now!