[Popover] style.overflow not overwritable

[Sharlaan]

For one of my projects, i use the Popover component with style.height set.

        <Popover
            open={this.state.isOpen}
            anchorEl={this.root}
            canAutoPosition={false}
            anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
            useLayerForClickAway={false}
            onRequestClose={this.handlePopoverClose}
            style={{
                overflowY: 'hidden !important',
                height: 370
            }}
        >

Problem: when i scroll down and inner <Menu/>'s height exceeds the <Popover/>'s, a scrollbar appears. Since i already have a scrollbar for my children, i want to hide this pesky Popover's scrollbar.

I tried adding the overflow-y: hidden !important shown in code above, but it doesnot work, the popover seems to always rerender with overflow-y: auto ....

Any solution please ?

[oliviertassinari]

I have dug a bit into the issue. The overflow-y: auto style is coming from the <PopoverAnimationDefault /> component.
Your best option right now is to implement your own animation component.
We could extend PopoverAnimationDefault to accept some overriding style properties.

[Sharlaan]

Hi @oliviertassinari

I actually chose another option, much more radical XD :

I replaced Menu with react-infinite, this fixed both the double containers issue, and this not-overridable overflowY. Simpler code as well.
I'll make a release of superSelectField soon.
Thanks for the insight on PopoverAnimation.

[oliviertassinari]

Thanks for letting me know. I'm closing.