Clear Event for HTML Search Input

Well, I guess it's fitting that my first post back be ECMAScript weirdness.

If you're not familiar, this is a search-type input element:

<input type=search value="some value" />

Notice the little "X" button to the right, it's for clearing the input value! If you were thinking there would be an event that fires when you click that button, my god, would you be wrong.

You can listen for an input event, but there's no way of differentiating between when someone just deletes all the contents of the input or when they click the clear button:

1<input
2  onInput="alert(`The new value is [${this.value}].`)"
3  type=search
4  value="some value" />

So. We're left to surmise for ourselves what is going on.

1<input
2  onClick="if (this.value) { setTimeout(() => { if (!this.value) { alert('CLEARED') } }, 0) }"
3  type=search
4  value="some value" />

Here it is written out using addEventListener:

1input.addEventListener("click", ({ target }) => {
2  // Start by check if there IS a value:
3  if (target.value) {
4    setTimeout(() => {
5      // If in the next tick there IS NOT a value,
6      // the clear button was likely clicked:
7      if (!target.value) {
8        alert('CLEARED')
9      }
10    }, 0)
11  }
12})