I'm trying to achieve behaviour that when the popper is open and it's bottom exceeding the window bottom, it's placement will be change (from 'right' to 'right-end').
I think to get the bottom position from the ref, and see if it passed the bottom. problem is, what ever i try the ref.current is null.
these is what i tried so far:
- passing ref object to the Popper component props ref and popperRef. on useEffect current came out null.
- passing ref object to the div the popper wraps. same, on useEffect the current property came null.
- passing callback to the popper ref/popperRef-props, and to the div it wraps. the ref callback isn't invoked, when it mounts.
- i did notice that the useEffect is executed before the popper is shown on the screen.
Popper component - example of passing callback to ref to the wrapped div
const customPopper = ({
popperRef = (popperElement) => {}
}) => {
const useStyles = makeStyles({
Popper: { ...popperStyle, ['z-index']: '9999' }
})
const styles = useStyles();
return (
<Popper
className={styles.Popper}
placement={placement}
open={open}
anchorEl={anchorEl}
>
<ClickAwayListener onClickAway={handleClickAway}>
<div ref={popperRef}>
<CalendarPopover
className={st(classes[calendarPopoverClass], { isMobile })}
isShown
withArrow={false}
title={title}
onClose={handleCloseClick}
>
{children}
</CalendarPopover>
</div>
</ClickAwayListener>
</Popper >
)
Parent component ref handler
const popperRefHandler = (popperRef: React.MutableRefObject<HTMLDivElement>) => {
const popperBottom = popperRef.current.getBoundingClientRect().bottom;
console.log('hello from popper mount in agenda cell, popper-bottom: ', popperBottom);
}
EDIT 1 - Sandbox Example
https://codesandbox.io/s/material-ui-issue-forked-zy11e?file=/src/index.js
