Angular 2/material의 경우 대화 상자에서 자동 포커스 사용 안 함

Angular 2/material의 경우 대화 상자에서 자동 포커스 사용 안 함

저는 각진 소재의 대화상자-2를 사용하고 있습니다.

문제는 특히 아이폰이나 태블릿에서 모달 대화 상자를 열 때 자동 포커스를 비활성화할 수 없다는 것입니다.iOS에서는 대화상자의 첫 번째 입력 필드에 자동으로 초점을 맞춥니다!

탭 인덱스로 시도했지만 다른 입력 필드에서 자동 포커스를 사용하면 작동하지 않습니다.

저는 제 코드에 Angular 2를 사용하고 있습니다. 제 대화상자에서는 폼 컨트롤을 사용하고 있습니다.사용하려고 했습니다.markasuntouched afterviewInit하지만 저는 여전히 같은 문제를 가지고 있습니다!!

부터@angular/material@5.0.0-rc.1autoFocus 특별한 옵션이 있습니다.MatDialogConfig

/** Whether the dialog should focus the first focusable element on open. */
autoFocus?: boolean = true;

따라서 다음과 같이 사용할 수 있습니다.

let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  width: '250px',
  data: { name: this.name, animal: this.animal },
  autoFocus: false   <============================== this line
});

스택블리츠 예제

이 솔루션을 사용하여 대화 상자를 열 때 자동 포커스를 비활성화하고 마지막으로 선택한 버튼에서 자동 포커스를 방지했습니다.Angular Material에서 대화 상자와 하단 시트 제어 모두에 잘 작동합니다. 코드를 참조하십시오.

this.dialog.open(YourComponent, {
      data: inputData,
      width: '100%', 
      autoFocus: false, 
      restoreFocus: false
    });

this.matBottomSheet.open(FilePickerComponent, {
      data: inputData,
      autoFocus: false,
      restoreFocus: false});

CDK 버전 14+

버전 기준14부울 값은 더 이상 지원되지 않습니다.사용하여 포커스를 비활성화하려면autoFocus존재하지 않는 쿼리 선택기를 전달할 수 있습니다.

@급변의
14.0.0 autoFocus에서 부울 옵션을 제거합니다.대신 문자열 또는 AutoFocusTarget을 사용합니다.

this.dialog.open(DialogOverviewExampleDialog, {
  autoFocus: '__non_existing_element__'
})

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