Month and Year Selects hidden when using Popper and anchor ref

[cavemanAGz]

I have the date range picker as a child of a material-ui Popper component, which is anchored to the bottom of a button. When I open the date range picker, and try to change the moth or year, the select options are hidden.

           <Popper
                open={open}
                anchorEl={buttonBaseRef.current}
                style={{marginTop: theme.spacing(2)}}
            >
                <div>
                    <DateRangePicker
                        open={true}
                        toggle={focusHandler}
                        onChange={dateOutput}
                    />
                </div>
            </Popper>

Is this an issue with this date range picker, or, is this an issue with how I am using it?

[beccabrown]

I have exactly the same issue too, I've done some digging and I believe it's related to this: https://stackoverflow.com/questions/61534340/is-there-a-way-to-control-where-a-nested-material-ui-select-in-a-popper-gets-mou For me, the Selects are rendered to the right of the component. We would need to be able to set the anchorEl of the Select menu to 'this' so that the menu stays within the Popper (here: https://github.com/jungsoft/materialui-daterange-picker/blob/master/package/src/components/Header.tsx#L96). I personally need this as the Date picker is opened using an icon button, and needs to be rendered within a Popper to allow for interaction with other DOM elements - it's bad UX to have to click another button twice to interact with it - one to close the Date Picker, and one to perform the click event.