[Angular Material] Dialog Modal 자동 포커스 끄기

Angular Material의 Dialog 컴포넌트는 기본적으로 모달이 열릴 때 내부 첫 번째 포커스 가능한 요소로 자동 포커스를 이동시킵니다.  
하지만 상황에 따라 이 자동 포커스 기능을 끄고 수동으로 포커스 이동을 제어하고 싶은 경우가 있습니다.

개발하는데 본문이 아닌 하단에 버튼이 먼저 focus가 가는 상황이 계속 발생해서 focus가 되지않도록 하고싶어서 찾아봤습니다.
간단하게 dialog 옵션에 autoFocus를 false로 변경하니 해결되네요.

this.dialog.open(ExampleDialogComponent, {
  autoFocus: false
});

 

참조 내용:

https://stackoverflow.com/questions/47562474/disable-auto-focus-in-dialog-modal-in-angular-2-material