Summary of the Issue & Solution

The reason my dropdown still displayed the selected option—even when I didn't store the selected value in the parent—was due to Angular's change detection optimizations. Since the selectedValue in the parent never actually changed, Angular did not trigger a UI update, and the browser's native behavior retained the selected value.

To force Angular to reset the dropdown back to the default option, I had to explicitly introduce a temporary value change before resetting it back to ''.

Working Solution

handleOnChange(event: any) {
  console.log(event.target.value);

  // Temporarily set a different value to force change detection
  this.selectedValue = 'temp-value';

  // Use setTimeout to reset it in the next JavaScript cycle
  setTimeout(() => {
    this.selectedValue = ''; // Revert to default selection
  });
}

Using setTimeout() ensures that Angular detects both changes separately, allowing the dropdown to reset properly.