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];
   }