Fixed <select> behaving differently in chrome

nise-frontend/src/app/search/search.component.html

@@ -32,16 +32,15 @@
     <fieldset class="mt-2" *ngIf="this.sortingOrder">
       <legend>sorting</legend>
 
-      <select>
+      <select (change)="onSortingFieldChange($event)">
         <ng-container *ngFor="let category of ['user', 'beatmap', 'score', 'metrics']">
           <optgroup label="{{ category }}">
             <ng-container *ngFor="let field of fields">
               <ng-container *ngIf="field.category === category">
                 <option
                   [value]="field.name"
-                  (click)="this.sortingOrder.field = field.name"
+                  [selected]="field.name === sortingOrder.field">
-                  [selected]="field.name == this.sortingOrder.field"
+                  {{ field.name }}
-                >{{ field.name }}
                 </option>
               </ng-container>
             </ng-container>

nise-frontend/src/app/search/search.component.ts

@@ -185,6 +185,22 @@ export class SearchComponent implements OnInit {
     }, {});
   }
 
+  onSortingFieldChange(event: Event): void {
+    const selectElement = event.target as HTMLSelectElement;
+    if(!selectElement) {
+      return;
+    }
+
+    if(this.sortingOrder === null) {
+      this.sortingOrder = {
+        field: 'user_id',
+        order: 'ASC'
+      };
+    }
+
+    this.sortingOrder.field = selectElement.value;
+  }
+
   saveSettingsToLocalStorage(): void {
     const settings = this.serializeSettings();
     localStorage.setItem('search_settings', JSON.stringify(settings));

nise-frontend/src/corelib/components/query/query.component.html

@@ -35,14 +35,14 @@
       </ng-container>
     </select>
 
-    <select [disabled]="!predicate.field">
+    <select [disabled]="!predicate.field" (change)="onOperatorChange(predicate, $event)">
-      <option *ngFor="let operator of predicate.field?.validOperators"
+      <option *ngFor="let operator of predicate.field?.validOperators" [value]="operator.operatorType"
-              [selected]="operator.operatorType === predicate.operator?.operatorType"
+              [selected]="operator.operatorType === predicate.operator?.operatorType">
-              (click)="predicate.operator = operator; this.queryChanged.emit()">
         {{ operator.operatorType }}
       </option>
     </select>
 
+
     <ng-container *ngIf="predicate.operator">
 
       <ng-container *ngIf="predicate.operator.acceptsValues == 'any'">

nise-frontend/src/corelib/components/query/query.component.ts

@@ -43,6 +43,16 @@ export class QueryComponent {
     predicate.operator = selectedField.validOperators[0];
   }
 
+  onOperatorChange(predicate: Predicate, event: Event): void {
+    const selectElement = event.target as HTMLSelectElement;
+    const selectedOperatorType = selectElement.value;
+    const selectedOperator = predicate.field?.validOperators.find(operator => operator.operatorType === selectedOperatorType);
+    if (selectedOperator) {
+      predicate.operator = selectedOperator;
+      this.queryChanged.emit(); // Assuming `queryChanged` is an EventEmitter you've defined somewhere in your component
+    }
+  }
+
   addPredicate(): void {
     this.query.predicates.push({ field: null, operator: null, value: null });
     this.queryChanged.emit();