From 3da9b6ac27076ddac656e4a9e8f4eeb555307e0e Mon Sep 17 00:00:00 2001
From: "nise.moe" <hey@nise.moe>
Date: Tue, 27 Feb 2024 12:23:28 +0100
Subject: [PATCH] Fixed <select> behaving differently in chrome

---
 .../src/app/search/search.component.html         |  7 +++----
 nise-frontend/src/app/search/search.component.ts | 16 ++++++++++++++++
 .../components/query/query.component.html        |  8 ++++----
 .../corelib/components/query/query.component.ts  | 10 ++++++++++
 4 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/nise-frontend/src/app/search/search.component.html b/nise-frontend/src/app/search/search.component.html
index 04a1a36..210069c 100644
--- a/nise-frontend/src/app/search/search.component.html
+++ b/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 == this.sortingOrder.field"
-                >{{ field.name }}
+                  [selected]="field.name === sortingOrder.field">
+                  {{ field.name }}
                 </option>
               </ng-container>
             </ng-container>
diff --git a/nise-frontend/src/app/search/search.component.ts b/nise-frontend/src/app/search/search.component.ts
index 4b21bf8..b1ff065 100644
--- a/nise-frontend/src/app/search/search.component.ts
+++ b/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));
diff --git a/nise-frontend/src/corelib/components/query/query.component.html b/nise-frontend/src/corelib/components/query/query.component.html
index 33cfbb8..896000a 100644
--- a/nise-frontend/src/corelib/components/query/query.component.html
+++ b/nise-frontend/src/corelib/components/query/query.component.html
@@ -35,14 +35,14 @@
       </ng-container>
     </select>
 
-    <select [disabled]="!predicate.field">
-      <option *ngFor="let operator of predicate.field?.validOperators"
-              [selected]="operator.operatorType === predicate.operator?.operatorType"
-              (click)="predicate.operator = operator; this.queryChanged.emit()">
+    <select [disabled]="!predicate.field" (change)="onOperatorChange(predicate, $event)">
+      <option *ngFor="let operator of predicate.field?.validOperators" [value]="operator.operatorType"
+              [selected]="operator.operatorType === predicate.operator?.operatorType">
         {{ operator.operatorType }}
       </option>
     </select>
 
+
     <ng-container *ngIf="predicate.operator">
 
       <ng-container *ngIf="predicate.operator.acceptsValues == 'any'">
diff --git a/nise-frontend/src/corelib/components/query/query.component.ts b/nise-frontend/src/corelib/components/query/query.component.ts
index 293b373..d13d8e7 100644
--- a/nise-frontend/src/corelib/components/query/query.component.ts
+++ b/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();