0
235
VisualizaçõesClosing a popper MUI using ClickAwayListener affects everything inside
I'm new react developer, here I have small problem my ClickAwayListener should close Popper when clicking 'x' or outside, which it does but problem is I have a component inside my Paper and that have Select when I click that select to see my options then options appear and fast disappear, I have tested and ClickAwayListener also affects this, how to disable the affect of ClickAwayListener to those inside Paper?
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
const renderSettingsPopper = () => {
return (
<Popper
id={"graph"}
open={popupOpenState()}
placement="left-start"
anchorEl={anchorEl}
className={props.classes.components}
style={{ zIndex: 4 }}
modifiers={{
flip: {
enabled: true,
},
preventOverflow: {
enabled: true,
boundariesElement: "viewport",
},
}}
>
<ClickAwayListener onClickAway={closeSettingsPopup}>
<Paper className={props.classes.components}>
{renderSettingsForm()}
</Paper>
</ClickAwayListener>
</Popper>
);
};
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
This problem is harder than I anticipated but I finally found a solution. You need to track the Select open state inside the Popover.
<Select
label="Age"
defaultValue={10}
onOpen={() => setSelectOpen(true)}
MenuProps={{
TransitionProps: {
onExited: () => setSelectOpen(false),
},
}}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
And disable the close handler when one of the Select is currently opened:
<ClickAwayListener
onClickAway={() => {
if (selectOpen) return;
handleClose();
}}
>
·
Juan Pablo Isaza
Relatório
Responde à pergunta