Angular blur event preventing click event of a button

I have a nested child component that contains an input. There is a blur event on the input

<input (blur)="onBlur()" ...>

In an ancestor component I have another element with a click event

<button (click)="onClick() ...>

Due to the blur event, the click event doesn't fire.

I can fix this by changing the click event to a mousedown. This isn't ideal because the user experience changes slightly.

I've tried adding a event.preventDefault(); method in the onBlur() method, but it doesn't seem to achieve anything (despite me reading on other SO posts that it would fix it).

Are there any fixes for this?

https://stackblitz.com/edit/stackblitz-starters-h8vgrf?file=src%2Fdeeply-nested%2Fdeeply-nested.component.html

The button is working fine, when you add a new element using blur the button is shifted down and the click is not recorded.

One more problem I saw was the click was not wrapped in event binding (click) which prevented the click from happening.

html

<span (click)="clearAll($event)">X - Clear All</span><br /><br />
<app-deeply-nested [inputFormCtrl]="formControl"></app-deeply-nested>

<br />
<br />

ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, UntypedFormBuilder } from '@angular/forms';
import { DeeplyNestedComponent } from '../deeply-nested/deeply-nested.component';

@Component({
  selector: 'app-ancestor',
  templateUrl: './ancestor.component.html',
  styleUrls: ['./ancestor.component.css'],
  standalone: true,
  imports: [DeeplyNestedComponent],
})
export class AncestorComponent implements OnInit {
  formControl: FormGroup;

  constructor(private fb: UntypedFormBuilder) {
    this.formControl = this.fb.group({
      tags: this.fb.array([]),
    });
  }

  ngOnInit() {}

  clearAll(event: Event) {
    this.formControl.reset();
  }
}

stackblitz