[React] Dialog 위 Component Focus Setting

 

React Dialog에서 Pop-up(sweetalert2 사용)을 띄웠을 때, focus를 잡지 못해 text/textarea 입력이 불가능함.

 

Dialog에서 sweetalert2/swal에 대한 focus를 위해서는 Dialog의 Option을 제어해야함.

 

disableEnfoceFocus={true} 로 설정해줌으로써 해결 가능.

 

 

sweetalert2 뿐 아니라 그 외의 toast/popup/alert 관련 모듈에서 공동적으로 발생할 수 있는 문제로 보임.

구글링했을 때 특정한 결과는 나오지 않지만, bootstrap에서 유사한 문제가 발생하는 것으로 유추됨.

 

        <Dialog
          disableEnforceFocus={true}
          fullWidth={true}
          maxWidth="xl"
          open={this.state.open}
          onClose={this.dialogClose}
          TransitionComponent={Transition}
        >

 

 

해당 옵션을 알지 못하고 Swal/Sweetalert2에서 option을 통해서 해결하려고 했으나 해결 안됨.

Swal.getContainer().focus() 등과 같이 container/content/button등을 확보할 수 있으나, focus()이 동작하지는 않음.