fix(select): Compare objects with selected values (#2125)

closes #2058 closes #2141 closes #2035

Author: trimox

demos/src/app/components/select/api.html

@@ -51,6 +51,11 @@ <h4 mdcSubtitle2>Properties</h4>
         <td>helperText: MdcHelperText</td>
         <td>Reference to related <code>MdcHelperText</code></td>
       </tr>
+      <tr>
+        <td>compareWith: (o1: any, o2: any) => boolean</td>
+        <td>Function to compare the option values with the selected values. The
+          first argument is a value from an option. The second is a value from
+          the selection. A boolean should be returned.</td>
     </tbody>
   </table>
 
@@ -59,7 +64,8 @@ <h4 mdcSubtitle2>Methods</h4>
     <tbody>
       <tr>
         <td>getSelectedIndex(): number</td>
-        <td>Returns the index of the currently selected option. Returns -1 if no option is currently selected.</td>
+        <td>Returns the index of the currently selected option. Returns -1 if no
+          option is currently selected.</td>
       </tr>
       <tr>
         <td>setSelectionByValue(value)</td>
@@ -119,7 +125,8 @@ <h4 mdcSubtitle2>Properties</h4>
     <tbody>
       <tr>
         <td>validation: boolean</td>
-        <td>Help text can be used to provide additional validation messages.</td>
+        <td>Help text can be used to provide additional validation messages.
+        </td>
       </tr>
       <tr>
         <td>persistent: boolean</td>

demos/src/app/components/select/examples.html

@@ -73,7 +73,8 @@ <h3 class="demo-content__headline">Leading Icon</h3>
       'Off'}}</button>
     <button mdc-button (click)="meal.setSelectedIndex(2)">Set Index (2)</button>
   </div>
-  <mdc-select #meal [helperText]="mealHelper" required placeholder="Pick a Meal">
+  <mdc-select #meal [helperText]="mealHelper" required
+    placeholder="Pick a Meal">
     <mdc-icon mdcSelectIcon>fastfood</mdc-icon>
     <mdc-menu class="demo-select-width">
       <mdc-list>
@@ -138,7 +139,8 @@ <h3 class="demo-content__headline">Custom Enhanced</h3>
 <div class="demo-content">
   <h3 class="demo-content__headline">Lazy Load</h3>
   <form [formGroup]="lazyLoadForm" #formDirectiveLazy="ngForm">
-    <mdc-select outlined formControlName="lazySelect" [helperText]="lazyHelper" placeholder="Example">
+    <mdc-select outlined formControlName="lazySelect" [helperText]="lazyHelper"
+      placeholder="Example">
       <mdc-menu class="demo-select-width">
         <mdc-list>
           <mdc-list-item *ngFor="let food of lazyFoods" [value]="food.value"
@@ -161,17 +163,21 @@ <h3 class="demo-content__headline">Lazy Load</h3>
   <example-viewer [example]="exampleLazyLoaded"></example-viewer>
 </div>
 
-<!-- <div class="demo-content">
+<div class="demo-content">
   <h3 class="demo-content__headline">Select with [compareWith]</h3>
   <form [formGroup]="formCompareWith">
     <mdc-select formControlName="fruit" [compareWith]="compareFn">
-      <option *ngFor="let fruit of fruits" [ngValue]="fruit">
-        {{ fruit.name }}
-      </option>
+      <mdc-menu class="demo-select-width">
+        <mdc-list>
+          <mdc-list-item *ngFor="let fruit of fruits" [value]="fruit">
+            {{fruit.name}}</mdc-list-item>
+        </mdc-list>
+      </mdc-menu>
     </mdc-select>
   </form>
   <p> Value: {{ formCompareWith.value | json}} </p>
-</div> -->
+  <example-viewer [example]="exampleCompareWith"></example-viewer>
+</div>
 
 <div class="demo-content">
   <h3 class="demo-content__headline">Select with ngModel</h3>

demos/src/app/components/select/select.ts

@@ -9,6 +9,11 @@ interface Food {
   disabled?: boolean;
 }
 
+interface Fruit {
+  id: number;
+  name: string;
+}
+
 @Component({template: '<component-viewer></component-viewer>'})
 export class Select implements OnInit {
   @ViewChild(ComponentViewer, {static: true}) _componentViewer: ComponentViewer;
@@ -47,24 +52,22 @@ export class Examples {
   foodControl = new FormControl();
 
   foodForm = new FormGroup({
-    favoriteFood: new FormControl(null, [Validators.required])
+    favoriteFood: new FormControl('pizza-1', [Validators.required])
   });
 
   lazyLoadForm = new FormGroup({
     lazySelect: new FormControl(null, [Validators.required])
   });
 
   formCompareWith: FormGroup;
-  fruits: object[] = [
+  fruits: Fruit[] = [
     {
       id: 1,
-      name: 'Pineapple',
-      tasty: true
+      name: 'Pineapple'
     },
     {
       id: 2,
-      name: 'Watermelon',
-      tasty: false
+      name: 'Watermelon'
     }
   ];
 
@@ -76,13 +79,13 @@ export class Examples {
     {value: 'fruit-3', viewValue: 'Fruit'},
   ];
 
-  compareFn(f1: any, f2: any): boolean {
+  compareFn(f1: Fruit, f2: Fruit): boolean {
     return f1 && f2 ? f1.id === f2.id : f1 === f2;
   }
 
   constructor(private fb: FormBuilder) {
     this.formCompareWith = this.fb.group({
-      fruit: [undefined]
+      fruit: this.fruits[0]
     });
 
     this.foodControl.setValue('fruit-3');
@@ -289,6 +292,45 @@ resetForm(formDirective: FormGroupDirective) {
 }`
   };
 
+  exampleCompareWith = {
+    html: `<form [formGroup]="formCompareWith">
+  <mdc-select formControlName="fruit" [compareWith]="compareFn">
+    <mdc-menu class="demo-select-width">
+      <mdc-list>
+        <mdc-list-item *ngFor="let fruit of fruits" [value]="fruit">{{fruit.name}}</mdc-list-item>
+      </mdc-list>
+    </mdc-menu>
+  </mdc-select>
+</form>`,
+ts: `formCompareWith: FormGroup;
+
+interface Fruit {
+  id: number;
+  name: string;
+}
+
+fruits: Fruit[] = [
+  {
+    id: 1,
+    name: 'Pineapple'
+  },
+  {
+    id: 2,
+    name: 'Watermelon'
+  }
+];
+
+constructor(private fb: FormBuilder) {
+  this.formCompareWith = this.fb.group({
+    fruit: [undefined]
+  });
+}
+
+compareFn(f1: Fruit, f2: Fruit): boolean {
+  return f1 && f2 ? f1.id === f2.id : f1 === f2;
+}`
+  };
+
   exampleLazyLoaded = {
     html: `<form [formGroup]="lazyLoadForm" #formDirectiveLazy="ngForm">
   <mdc-select outlined formControlName="lazySelect" [helperText]="lazyHelper">

packages/select/select.ts

@@ -206,14 +206,7 @@ export class MdcSelect extends _MdcSelectMixinBase implements AfterViewInit, DoC
   }
   private _valid?: boolean;
 
-  @Input()
-  get compareWith() {
-    return this._compareWith;
-  }
-  set compareWith(fn: (o1: any, o2: any) => boolean) {
-    this._compareWith = fn;
-  }
-  private _compareWith = (o1: any, o2: any) => o1 === o2;
+  @Input() compareWith: (o1: any, o2: any) => boolean = (a1, a2) => a1 === a2;
 
   /** Value of the select */
   @Input()
@@ -390,6 +383,8 @@ export class MdcSelect extends _MdcSelectMixinBase implements AfterViewInit, DoC
       .then(() => {
         this._selectBuilder();
       });
+    this._initializeSelection();
+    this._subscribeToMenuEvents();
   }
 
   ngOnDestroy(): void {
@@ -416,7 +411,9 @@ export class MdcSelect extends _MdcSelectMixinBase implements AfterViewInit, DoC
   }
 
   writeValue(value: any): void {
-    this.setSelectionByValue(value, false);
+    if (this._initialized) {
+      this.setSelectionByValue(value, false);
+    }
   }
 
   registerOnChange(fn: (value: any) => void): void {
@@ -455,23 +452,20 @@ export class MdcSelect extends _MdcSelectMixinBase implements AfterViewInit, DoC
   }
 
   setSelectedIndex(index: number): void {
-    this._foundation.setSelectedIndex(index, this._menu.closeSurfaceOnSelection);
-    this.setSelectionByValue(this._menu._list?.getListItemByIndex(index)?.value);
+    this.setSelectionByValue(this._menu._list?.getListItemByIndex(index)?.value, true, index);
   }
 
   setSelectionByValue(value: any, isUserInput = true, index?: number): void {
     if (!this._value && !value) {
       return;
     }
 
-    if (index) {
-      // This method was called directly, not called from setSelectedIndex
-      this._foundation.setSelectedIndex(index, this._menu.closeSurfaceOnSelection);
-      value = this._menu._list?.getListItemByIndex(index)?.value;
+    if (!index) {
+      index = this._menu._list?.getListItemIndexByValue(value);
     }
 
     this._value = value;
-    this._foundation?.setValue(this._value);
+    this._foundation.setSelectedIndex(index ?? -1, this._menu.closeSurfaceOnSelection);
 
     if (isUserInput) {
       this._onChange(this._value);
@@ -482,15 +476,13 @@ export class MdcSelect extends _MdcSelectMixinBase implements AfterViewInit, DoC
       index: this.getSelectedIndex(),
       value: this._value
     });
-    this._changeDetectorRef.markForCheck();
-  }
 
-  async _asyncSetSelectionByValue(value: any, isUserInput: boolean = true): Promise<void> {
-    return this.setSelectionByValue(value, isUserInput);
+    this._foundation.handleChange();
+    this._changeDetectorRef.markForCheck();
   }
 
   // Implemented as part of ControlValueAccessor.
-  setDisabledState(disabled: boolean) {
+  setDisabledState(disabled: boolean): void {
     this._disabled = coerceBooleanProperty(disabled);
     this._foundation?.setDisabled(this._disabled);
     this._changeDetectorRef.markForCheck();
@@ -503,11 +495,10 @@ export class MdcSelect extends _MdcSelectMixinBase implements AfterViewInit, DoC
   /** Initialize Select internal state based on the environment state */
   private layout(): void {
     if (this._initialized) {
-      this._selectBuilder();
-
-      if (this._outlined) {
+      this._asyncBuildFoundation().then(() => {
+        this._selectBuilder();
         this._foundation.layout();
-      }
+      });
     }
   }
 
@@ -518,7 +509,6 @@ export class MdcSelect extends _MdcSelectMixinBase implements AfterViewInit, DoC
       const value = this.ngControl?.value ?? this._value;
       if (value) {
         this.setSelectionByValue(value, false);
-        this._foundation.layout();
       }
     });
   }
@@ -543,14 +533,13 @@ export class MdcSelect extends _MdcSelectMixinBase implements AfterViewInit, DoC
   private _selectBuilder(): void {
     this._changeDetectorRef.detectChanges();
 
+    // initialize after running a detectChanges()
     this._asyncInitFoundation()
       .then(() => {
-        // initialize after running a detectChanges()
         if (!this.outlined) {
           this._ripple = this._createRipple();
           this._ripple.init();
         }
-        this._initializeSelection();
 
         this._menu.wrapFocus = false;
         this._menu.elementRef.nativeElement.setAttribute('role', 'listbox');
@@ -561,13 +550,12 @@ export class MdcSelect extends _MdcSelectMixinBase implements AfterViewInit, DoC
           this._menu._list.singleSelection = true;
         }
       });
-    this._subscribeToMenuEvents();
   }
 
   private _subscribeToMenuEvents(): void {
     // When the list items change, re-subscribe
     this._menu._list!.items.changes.pipe(takeUntil(this._destroyed))
-      .subscribe(() => this.layout());
+      .subscribe(() => this._initializeSelection());
 
     // Subscribe to menu opened event
     this._menu.opened.pipe(takeUntil(this._destroyed))