MUI <ClickAwayListener/> 안에 <Select/> 메뉴 클릭하면 닫힐때

MUI 기반 컴포넌트로 작업 중 난관에 봉착

1.  문제

<ClickAwayListener onClickAway={onClose} >
    <Box> 
        // .. code
        <Select
        ...code
        value={0}
        onChange={e => console.log(e)}
 	   />
    </Box>
</ClickAwayListener>

<Box/> 컴포넌트 외 영역을 클릭하면 <Box/>가 사라지도록 하기 위해 <ClickAwayListener/> 컴포넌트를 사용했다.

문제는 Select 박스를 클릭해서 열고 메뉴를 클릭하는 순간
<ClickAwayListener/>의 onClickAway가 실행되면서 <Box/>가 사라져 버린 것.

 

2. 원인

<Select/>가 open상태일 때 보이는 메뉴 박스는 <Box/> 컴포넌트 외부에 생성되기 때문

 

3. 해결

<ClickAwayListener/>에 mouseEvent={'onMouseUp'} prop을 추가해주면 된다!
default가 onClick이다보니 Select 박스를 클릭하는 순간 onClickAway도 실행되면서 Box가 닫힌다.
그래서 클릭이 아닌 onMouseUp 되는 순간 onClickAway가 실행되도록 하면
Select 박스에 영향이 없다~

<ClickAwayListener onClickAway={onClose} mouseEvent={'onMouseUp'} >
    <Box>
        // .. code
        <Select
        ...code
        value={0}
        onChange={e => console.log(e)}
 	   />
    </Box>
</ClickAwayListener>

 

12월 6일 수정

바보.. <- 그냥 MenuProps에 disablePortal true 값을 주면 된다..^^ㅋ

<ClickAwayListener onClickAway={onClose}>
    <Box>
        // .. code
        <Select
        ...code
        value={0}
        onChange={e => console.log(e)}
        MenuProps={{ disablePortal: true }} <--- 추가     
 	   />
    </Box>
</ClickAwayListener>