Why the unpredictable results when using async await on key events - winforms

Question

I do not understand why I am getting strange results on key events in a winForm app using async await on keydown in a form. Here is very simple demo of my issue.
The complete app:
using System.Drawing;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace WindowsFormsApp1
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
int counter = 0;
private async void Form1_KeyDown(object sender, KeyEventArgs e)
{
await HandleKeypress();
}
private async Task HandleKeypress()
{
switch (counter)
{
case 0:
label1.BackColor = Color.Red;
label2.BackColor = Color.White;
label3.BackColor = Color.White;
break;
case 1:
label1.BackColor = Color.White;
label2.BackColor = Color.Red;
label3.BackColor = Color.White;
break;
case 2:
label1.BackColor = Color.White;
label2.BackColor = Color.White;
label3.BackColor = Color.Red;
label3.Refresh();
await Task.Delay(5000);
break;
}
counter++;
if (counter == 3)
{
counter = 0;
}
}
}
}
The form KeyPreview is on and a KeyDown event on the form
fires the async method. A counter is incremented from 0 to 3 when it reaches 3 the counter is reset to 0.There are three labels depending on the counter value 0,1,2 the corresponding labels background is set to red and the the other two back to white. There is 5 second delay on when the counter == 2. If I keep pressing the enter key when the counter == 2 I would expect label 3 to go to red and the other two labels to reset to white. Then after 5 seconds I would expect label1 to revert to red and the sequence to continue. This is not what happens and the sequence becomes somewhat caotic. Why does this happen.You have to keep pressing a key.

Answer 1

If you can cancel the keypress with a bool (cancelAction) set before the delay then the desired action can be accomplished.
int counter = 0;
bool cancelAction = false;
private async void Form1_KeyDown(object sender, KeyEventArgs e)
{
await HandleKeypress();
}
private async Task HandleKeypress()
{
if (cancelAction)
{
return;
}
switch (counter)
{
case 0:
label1.BackColor = Color.Red;
label2.BackColor = Color.White;
label3.BackColor = Color.White;
break;
case 1:
label1.BackColor = Color.White;
label2.BackColor = Color.Red;
label3.BackColor = Color.White;
break;
case 2:
label1.BackColor = Color.White;
label2.BackColor = Color.White;
label3.BackColor = Color.Red;
label3.Refresh();
cancelAction = true;
await Task.Delay(5000);
cancelAction = false;
break;
}
counter++;
if (counter == 3)
{
counter = 0;
}
}