[docs] Demo VirtualElementPopper crashes

[jakekh]

• I have searched for similar issues in this repository and believe that this is not a duplicate.

Steps to Reproduce

1. Visit https://mui.com/material-ui/react-popper/
2. highlight some text and open the popper
3. click outside the typography component before the popper is hidden by the onMouseLeave event runs
4. or just run the demo with out that onMouseLeave event attached and click anywhere other than the text while the popper is open
5. demo VirtualElementPopper crashes

Your Environment

Tech	Version
MUI	v5.10.6
Netlify deploy	https://63287dcb7cfef00009bcbe8a--material-ui-docs.netlify.app
Browser	Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

[mnajdova]

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?

[jakekh]

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!

[michaldudak]

This looks like a duplicate of #32106.

[jakekh]

true

…

On Tue, Oct 11, 2022 at 1:30 PM Michał Dudak ***@***.***> wrote: This looks like a duplicate of #32106 <#32106>. — Reply to this email directly, view it on GitHub <#34450 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA7RCWDDHJNRTNYDIK6ZZBDWCXE4RANCNFSM6AAAAAAQUIKUWY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[michaldudak]

Duplicate of #32106