fix(forms): correct usage of `selectedOptions` (#37620)

Previously, `registerOnChange` used `hasOwnProperty` to identify if the
property is supported. However, this does not work as the `selectedOptions`
property is an inherited property. This commit fixes this by verifying
the property on the prototype instead.

Closes #37433

PR Close #37620

packages/forms/src/directives/select_multiple_control_value_accessor.ts

@@ -156,7 +156,7 @@ export class SelectMultipleControlValueAccessor implements ControlValueAccessor
   registerOnChange(fn: (value: any) => any): void {
     this.onChange = (_: any) => {
       const selected: Array<any> = [];
-      if (_.hasOwnProperty('selectedOptions')) {
+      if (_.selectedOptions !== undefined) {
         const options: HTMLCollection = _.selectedOptions;
         for (let i = 0; i < options.length; i++) {
           const opt: any = options.item(i);

packages/forms/test/value_accessor_integration_spec.ts

@@ -499,6 +499,18 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
           }
         };
 
+        it('verify that native `selectedOptions` field is used while detecting the list of selected options',
+           fakeAsync(() => {
+             if (isNode || !HTMLSelectElement.prototype.hasOwnProperty('selectedOptions')) return;
+             const spy = spyOnProperty(HTMLSelectElement.prototype, 'selectedOptions', 'get')
+                             .and.callThrough();
+             setSelectedCities([]);
+
+             selectOptionViaUI('1: Object');
+             assertOptionElementSelectedState([false, true, false]);
+             expect(spy.calls.count()).toBe(2);
+           }));
+
         it('should reflect state of model after option selected and new options subsequently added',
            fakeAsync(() => {
              if (isNode) return;