为什么 TextArea 焦点不允许用户选择和复制文本？

问：

在我的 angular 应用程序中，我有一个 TextArea 字段，我正在有条件地禁用和启用它。此外，每当启用它时，我都会将焦点放在它上面。但是，每当 textArea 字段被启用和聚焦时，文本选择都不会应用于我的组件中的另一个元素。

下面我将分享我的代码片段，我如何实现 textArea 字段的焦点和禁用。

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;
  }

  .
  .
  .
}

正如我之前所说，每当 textArea 获得焦点时，使用鼠标单击应用程序中的另一个段落标签就会停止文本选择和复制。如果它不在焦点中，我可以选择和复制文本。

注意：但我可以在 Edge、safari 和 firefox 等浏览器中选择和复制，甚至 textArea 也能获得焦点。仅在 chrome 中，我面临这个问题。

请帮助解决此问题。

提前致谢。