[MUI] Modal 안의 TextField에 useRef focus 안될 때

mui 모달을 띄울 때 TextField에 포커스를 주고 싶어서 useRef를 썼다.

 

inputRef.current.focus();

 

근데 에러가 남;

Cannot read properties of null (reading 'focus')

 

inputRef 가 null 이더라고?

 

모달 안에 있어서 렌더링이 아직 안됐구나 싶어서

useEffect 를 써서

모달 오픈됐을 때... inputRef.current가 변경됐을때...

ref current를 찾으려고 했는데도 

계속 null 이었다.

 

---

 

방법은

disablePortal

속성을 주는 것...

 

<Modal>이나 <Dialog> 에 주면 된다.

 

dom 구조에서 하위 요소가 상위 요소 아래에 배치되는지 여부를 결정하는 속성이고,

기본값은 false 이다.

 

내가 모달을 오픈하는 컴포넌트 하위에 이 모달이 있어야 했는데

같은 계층에 있어서 통신에 문제가 있었던 듯

 

---

 

그리고 TextField 에 useRef 를 사용할때는

ref={inputRef}

ref 가 아니라

 

inputRef={inputRef}

inputRef 를 사용한다