Closed jakekh closed 1 year ago
I couldn't reproduce this on Chrome, Mozilla nor Edge. I've used both Light and Dark mode. Could you maybe share more info about your interactions with the docs before the demo crashed?
Did you remove the mouse leave event and try clicking outside the typography component while the popper is open?
Anyways, I was able to figure out a workaround, it appears the demo uses a mouse leave event to close the popper because there is a conflict when the popper is open and the "selection.getRangeAt(0).getBoundingClientRect()" is still running in the popper.
So I added a "setTimeout, 0" to make it run faster, then I added the clickAway thing to close the popper because it doesn't have this functionality built in and without the mouse leave event it will not close when you click anywhere else. I also changed the "getBoundingClientRect" to be a value instead of passing a function to the popper so it will stop trying to run on its own.
Here's my code:
const handleClose = () => {
setOpen(false);
};
const checkSelection = () => {
setTimeout(() => {
const selection = window.getSelection();
if(!selection || selection.anchorOffset === selection.focusOffset) {
handleClose();
return;
}
const rect = selection.getRangeAt(0).getBoundingClientRect();
const getBoundingClientRect = () => rect;
setOpen(true);
setAnchorEl({getBoundingClientRect});
}, 0);
};
return (
<Container
maxWidth={false}
sx={{bgcolor: "background.paper", minHeight: 100}}
>
<ClickAwayListener onClickAway={handleClose}>
<div>
<div onMouseUp={checkSelection} style={{padding: 16}}>
<Typography>{content}</Typography>
</div>
<Popper
open={open}
anchorEl={anchorEl}
transition
placement="bottom"
sx={{zIndex: 1}}
>
{({ TransitionProps }) => (
<Fade {...TransitionProps } timeout={350}>
<ButtonGroup onMouseDown={(e) => e.preventDefault()}>
{buttons}
</ButtonGroup>
</Fade>
)}
</Popper>
</div>
</ClickAwayListener>
</Container>
);
Let me know what you think!
This looks like a duplicate of #32106.
true
On Tue, Oct 11, 2022 at 1:30 PM Michał Dudak @.***> wrote:
This looks like a duplicate of #32106 https://github.com/mui/material-ui/issues/32106.
— Reply to this email directly, view it on GitHub https://github.com/mui/material-ui/issues/34450#issuecomment-1275239740, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA7RCWDDHJNRTNYDIK6ZZBDWCXE4RANCNFSM6AAAAAAQUIKUWY . You are receiving this because you authored the thread.Message ID: @.***>
Duplicate of #32106
Steps to Reproduce
Your Environment