SelectControlValueAccessor overwriting NativeElement's value if using custom control value accessor

[tomasszabo]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

I'm using custom control value accessor UseValueAsNumber with ReactiveForms on SELECT element but default SelectControlValueAccessor from Angular is overwriting values set by UseValueAsNumber.

The problem seems to be following:

1. UseValueAsNumber sets NativeElement value through:
   this.renderer.setProperty( this.elementRef.nativeElement, 'value', this.value );
2. After the value is set correctly, the NgSelectOption.setValue() method is fired which internally calls if (this._select) this._select.writeValue(this._select.value);. However this._select.value is undefined (as there is only 1 ControlValueAccessor allowed per FormControl) but this._select (which is in fact SelectControlValueAccessor instance) overwrites NativeElement's value to undefined and in HTML the correct value is never selected.

Expected behavior

Do not overwrite NativeElement's value property in order to display correct value in HTML.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-gitter-marugk

What is the motivation / use case for changing the behavior?

Environment

Angular version: 6.1.3


Browser:
- [x ] Chrome (desktop) version 68.0.3440.106
 

[dylhunn]

setValue is the authoritative place for setting the native control's value. Doing that by hand with the native element ref is probably not the right approach. I suspect this is WAI, but we could look at the StackBlitz in more depth.