feat(select): add compareWith property (#17358)

* feat(select): add compareWith property

* style(select): fix lint errors

* test(select): move tests from preview to basic

* refactor(select): improve parameter names in compareOptions method

* chore(): add react usage docs

* chore(): update var names, update examples

* rerun build

* add doc on compareWith

core/src/components/select/test/basic/index.html

@@ -55,6 +55,15 @@
 
       </ion-list>
 
+      <ion-list>
+        <ion-list-header>Object Values with trackBy</ion-list-header>
+
+        <ion-item>
+          <ion-label>Users</ion-label>
+          <ion-select id="objectSelectCompareWith"></ion-select>
+        </ion-item>
+      </ion-list>
+
       <ion-list>
         <ion-list-header>Select - Custom Interface Options</ion-list-header>
 
@@ -280,6 +289,48 @@
     </style>
 
     <script>
+      let objectOptions = [
+        {
+          id: 1,
+          first: 'Alice',
+          last: 'Smith',
+        },
+        {
+          id: 2,
+          first: 'Bob',
+          last: 'Davis',
+        },
+        {
+          id: 3,
+          first: 'Charlie',
+          last: 'Rosenburg',
+        }
+      ];
+
+      let compareWithFn = (o1, o2) => {
+        return o1 && o2 ? o1.id === o2.id : o1 === o2;
+      };
+
+      let objectSelectElement = document.getElementById('objectSelectCompareWith');
+      objectSelectElement.compareWith = compareWithFn; // 'id';
+      
+      objectOptions.forEach((option, i) => {
+        let selectOption = document.createElement('ion-select-option');
+        selectOption.value = option;
+        selectOption.textContent = option.first + ' ' + option.last;
+        selectOption.selected = (i === 0);
+        
+        objectSelectElement.appendChild(selectOption)
+      });
+
+      setTimeout(() => {
+        objectSelectElement.value = {
+          id: 1,
+          first: 'Alice',
+          last: 'Smith',
+        };
+      }, 3000);
+      
       var pets = document.getElementById('pets');
       pets.value = ['bird', 'dog'];
 

core/src/components/select/test/preview/index.html

@@ -152,4 +152,4 @@
   </ion-app>
 </body>
 
-</html>
+</html>