2

Issue

Unable to copy text from disabled matInput on firefox. This works on Chrome and Safari. There are some discussions on this on Stackoverflow: Link 1 Link 2

Stackblitz

HTML

   <form [formGroup]="customerContactFormGroup">
      <mat-form-field>
        <input matInput placeholder="Copy below text in Firefox" formControlName="customerName">
      </mat-form-field>
    </form>

TS

export class AppComponent implements OnInit{
  customerContactFormGroup: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.customerContactFormGroup = this.formBuilder.group({
      customerName: ['Some Text to Copy', Validators.required]
    });
  }

  ngOnInit(){
    this.customerContactFormGroup.get('customerName').disable();
  }
}

I'm using Angular's formgroup.disable() method. As per Mozilla there is clear demarcation between readonly and disabled attribute.

There are several workarounds of copying text, has anyone solved it without those workarounds or discuss this with Angular Material Team to know their stand on this issue?

stayingcool
  • 2,324
  • 1
  • 21
  • 24

0 Answers0