Why TextArea focus does not allow user to select and copy text?

Question

In my angular application, I have a TextArea field and I am disabling and enabling it conditionally. Also I apply focus on it whenever it is enabled. But, Whenever the textArea field gets enabled and focussed, text selection is not applying on another element in my component.

Below I share my code snippets how I implemented the focus and disable for textArea field.

HTML:

.
.
.

    <div class="chat-footer">
      <textarea
        class="caret-color"
        id="chat-textarea"
        placeholder="Send a message"
        [(ngModel)]="chatInputMessage"
        cols="1"
        rows="1"
        (input)="onTyping()"
        (keydown.enter)="onEnter($event)"
        [disabled]="isMessageLoading()"
        #typingField
      ></textarea>
.
.
.

</div>

TS:

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.scss'],
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0, height: '0' }),
        animate('300ms ease-in', style({ opacity: 2, height: '*' })),
      ]),
      transition(':leave', [
        style({ opacity: 1, height: '*' }),
        animate('300ms ease-out', style({ opacity: 0, height: '0' })),
      ]),
    ]),
  ],
})
export class ChatComponent implements OnInit, OnDestroy {

  typeDisabled: boolean = true;


  @ViewChild('typingField') typingFieldRef!: ElementRef;

  private subscriptions = new Subscription();

  constructor(
   ...
  ) {}

  ngOnInit(): void {
   
   ...

    if (this.taskId && this.selectedDocumentName && this.documentId) {

         some login comes here

          if (this.responseType === PROMPT_RESPONE_MESSAGE.INGEST_COMPLETED_MESSAGE) {

            ...

            if (this.typingFieldRef) {
              this.typingFieldRef.nativeElement.focus();
            }

            this.chatMessages.push({
              user: this.ais,
              message: INITIAL_PROMPT_MESSAGE,
              created_at: Date.now(),
              prompt_id: null,
            });
            this.typeDisabled = false;
          } else if (this.responseType === PROMPT_RESPONE_MESSAGE.PROMPT_RESPONSE) {

           ...

            if (this.responseFinishReason) {
              this.typeDisabled = false;
            } else {
              this.typeDisabled = true;
            }
            
          } else if (this.responseType === PROMPT_RESPONE_MESSAGE.INGEST_FAILED) {

           ...

          } else if (this.responseType === PROMPT_RESPONE_MESSAGE.PROMPT_RESPONSE_FAILED) {

            ...

            this.typeDisabled = false;
          }
        

      
  }

  ngOnDestroy(): void {
    this.subscriptions.unsubscribe();
  }

  onEnter(event: any) {
    if (event.key === 'Enter') {
      this.send();
      event.preventDefault();
    }
  }

  onTyping() {
    this.isWaterMark = false;
  }

  send() {
         ... 

      this.typeDisabled = true;

         ...
    }
 
  isMessageLoading() {
    if (this.typingFieldRef) {
      this.typingFieldRef.nativeElement.focus();
    }
    return this.typeDisabled;
  }

  .
  .
  .
}

As I said earlier, This stops the text selection and copy using the mouse click on another paragraph tag in the application whenever the textArea get focuss. If it is in not foucs, I am able to select and copy text.

NOTE: But I am able select and copy in browerser like Edge, safari and firefox even te textArea get focus. In chrome only I am facing this.

Kindly help to fix this issue.

Thanks in advance.