Por que meu menu suspenso Angular atualiza a seleção mesmo quando o pai não armazena o valor selecionado?

Meu raciocínio é este:

Você tem uma vinculação de propriedade, [value]="selected"o que significa que somente quando o valor selectedtiver uma alteração de valor real ( 1-> 2) a detecção de alterações será executada para a seleção e atualizará o DOM, mas no seu cenário, você nunca atualiza selectedo valor no filho nem no pai, então não há necessidade de a visualização atualizar quando o valor de entrada não muda.

Se você verificar o código abaixo, verá que o HTML foi atualizado quando eu programei selectedValueo pai para 3, mas não em alterações subsequentes. Porque o valor vai de ( ''--on first attempt--> 3--on subsequent changes--> 3(remains 3)) Então o HTML nunca é atualizado e mantém as alterações do usuário.

Se você quiser obter algum tipo de reversão, terá que fazê-lo programaticamente.

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-custom-dropdown',
  imports: [CommonModule, FormsModule],
  template: `
  <select [value]="selected" (change)="onChange($event)">
    <option value="" hidden>default</option>
    <option *ngFor="let option of options" [value]="option.value">
      {{ option.text }}
    </option>
  </select>
  `,
})
export class CustomDropdownComponent {
  @Input() options: { value: string; text: string }[] = [];
  @Input() selected: string = '';

  @Output() selectionChange: EventEmitter<any> = new EventEmitter<any>();

  onChange(event: any) {
    this.selectionChange.emit(event); // Emitting value but parent does not save it
  }

  ngDoCheck() {
    console.log('CustomDropdownComponent check');
  }
}

@Component({
  selector: 'app-root',
  imports: [CustomDropdownComponent],
  template: `
    <app-custom-dropdown 
      [options]="options" 
      [selected]="selectedValue" 
      (selectionChange)="handleOnChange($event)">
    </app-custom-dropdown>
  `,
})
export class App {
  options = [
    { value: '1', text: 'Option 1' },
    { value: '2', text: 'Option 2' },
    { value: '3', text: 'Option 3' },
  ];

  ngDoCheck() {
    console.log('App check');
  }

  selectedValue = ''; // Intentionally not updating this when selection changes

  handleOnChange(event: any) {
    this.selectedValue = '3';
    console.log(event.target.value); // Logging the value but not saving it
  }
}

bootstrapApplication(App);

Demonstração do Stackblitz

Resumo do problema e solução

O motivo pelo qual meu menu suspenso ainda exibia a opção selecionada — mesmo quando eu não armazenava o valor selecionado no pai — era devido às otimizações de detecção de alterações do Angular. Como o selectedValueno pai nunca mudou de fato, o Angular não acionou uma atualização de UI, e o comportamento nativo do navegador manteve o valor selecionado.

Para forçar o Angular a redefinir o menu suspenso de volta para a opção padrão, tive que introduzir explicitamente uma alteração temporária de valor antes de redefini-lo de volta para ''.

Solução de trabalho

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
  });
}

Usar setTimeout() garante que o Angular detecte ambas as alterações separadamente, permitindo que o menu suspenso seja redefinido corretamente.