From c39dceb7415603e81fa8b48e37c98c9c0db2d0de Mon Sep 17 00:00:00 2001
From: "nise.moe" <hey@nise.moe>
Date: Tue, 27 Feb 2024 01:20:41 +0100
Subject: [PATCH] Fixed <select> (change) not being fired

---
 .../src/corelib/components/query/query.component.html  |  4 ++--
 .../src/corelib/components/query/query.component.ts    | 10 +++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/nise-frontend/src/corelib/components/query/query.component.html b/nise-frontend/src/corelib/components/query/query.component.html
index bcd7c64..33cfbb8 100644
--- a/nise-frontend/src/corelib/components/query/query.component.html
+++ b/nise-frontend/src/corelib/components/query/query.component.html
@@ -20,13 +20,13 @@
 
   <div *ngFor="let predicate of query.predicates; let i = index">
 
-    <select style="max-width: 60%">
+    <select style="max-width: 60%" (change)="onFieldChange(predicate, $event)">
       <option value="" disabled selected>---</option>
       <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" [selected]="field.name === predicate.field?.name" (click)="onFieldChange(predicate, field)">
+              <option [value]="field.name" [selected]="field.name === predicate.field?.name">
                 {{ field.name }}
               </option>
             </ng-container>
diff --git a/nise-frontend/src/corelib/components/query/query.component.ts b/nise-frontend/src/corelib/components/query/query.component.ts
index 2a29d70..293b373 100644
--- a/nise-frontend/src/corelib/components/query/query.component.ts
+++ b/nise-frontend/src/corelib/components/query/query.component.ts
@@ -30,7 +30,15 @@ export class QueryComponent {
 
   constructor() {}
 
-  onFieldChange(predicate: Predicate, selectedField: any): void {
+  onFieldChange(predicate: Predicate, event: Event): void {
+    const selectElement = event.target as HTMLSelectElement;
+    const selectedValue = selectElement.value;
+    const selectedField = this.fields.find(field => field.name === selectedValue);
+
+    if(!selectedField) {
+      return;
+    }
+
     predicate.field = selectedField;
     predicate.operator = selectedField.validOperators[0];
   }