Force other components to run (change) before my button's (mousedown)

I have a button on formly with mousedown that has a method called "analyzeClick()"

<button *ngIf="show" (mousedown)="analyzeClick()" id={{htmlID}}>
  {{label}} 
</button> 

now, we also have inputs that have have a (change) event that runs a method called "saveData()"

<input id={{htmlID}} type="text" [formControl]="frmControl" (change)="saveData()"  /> 

However, we found that after you are typing on an input and immediately clicking on the button, (mousedown) runs first before (change) and the problem is that the method on analyzeClick needs data on saveData..

I've tried applying a timeout as specified here

public analyzeClick(): void {
        

        let i = 0;
        (() => {
            if (++i > 1) {
                return;
            }
            setTimeout(function(){
                console.log('Iteration: ' + i);
            }, 15000);

            this.runTheCode();
        })();
}

but still, a button's (mousedown) runs first before an input's (change)

What do I need to do in this scenario to make sure an input's (change) runs first before (mousedown)??

There are 4 events to consider:

• change
• input
• mousedown
• click

input occurs immediately, so that is one way to be absolutely sure that your changes are seen.

mousedown occurs before change - so on your first mouse down, you won't get the entered value

click occurs after change - so that is also safe to use.

See stackblitz for example.