Selected text appearing after mouseup disappears with any click

I have written code in my Angular app to get the text snippet selected/highlighted by the user into a text area:

<textarea name="highlightedText" id="selectedText" rows="3" class="form-control"
    placeholder="Your highlighted text will appear here..."
    [(ngModel)]="highlightedText" (mouseup)="mouseUp()">
</textarea>

In my component, I have:

// Content of user annotation
highlightedText: string = "";

constructor() {
    document.body.addEventListener("mouseup", () => {
      this.mouseUp();
    });
}

mouseUp() {
    if (window.getSelection) {
      this.highlightedText = window.getSelection()!.toString();
    }
    return this.highlightedText;
}

This works; meaning the text I select appears in the text box, but as soon as I click in that box (or click anywhere on the page) the text disappears.

What am I doing wrong that the transferred text does not stay there?

Answer

What did You actually expected – the val being reevaluated when You click (making ‘mousedown’ / ‘mouseup’) …

  mouseUp() {
    if (window.getSelection) {
      this.reEval();
    }
    return this.highlightedText;
  }

  reEval() {
    const val = window.getSelection()!.toString().trim();
    if (!!val.length) this.highlightedText = val;
  }