Dropdown selection not registered by Chrome's undo functionality

I have a custom input component that extends a text input by a dropdown list with suggestions based on previous user input. When I select different suggestions subsequently and then use Chrome's undo feature by pressing CTRL+Z, it concatenates the previous string rather than replacing the current string in the field.

For instance, when I first select the suggestion "AAA", then remove it, then select "BBB" and press CTRL+Z, the input contains the string "BBBAAA".

So it seems that the string insertion from the dropdown menu is not registered by Chrome as a modification to the DOM on the undo stack. As the last registered action was removing the string, the undo function just concatenates it to the current one.

This happens in Chrome and Internet Explorer 11, in Firefox I don't have any problems.

I tried suppressing the CTRL+Z undo feature for the given input with a Custom Directive:

@HostListener('keydown', ['$event']) onKeyDown(e: KeyboardEvent) {
  if (e.ctrlKey && e.keyCode === 90) {
    e.preventDefault();
  }
}

However, I can still undo the changes of the input by pressing CTRL+Z in another input field, so I would have to disable the undo feature for the whole site.

How can I tell Chrome to add the input change to its undo stack?

Here is the simple callback function by the dropdown input that updates the value when a dropdown item is selected:

(contact) => {
  if (this.formGroup) {
    this.formGroup.patchValue(contact);
  }
}

Replacing patchValue() by setValue() does not seem to make any difference, nor does calling this.formGroup.markAsTouched();.