From 828be095a29c0df843f9b38b30208f6e80f949dc Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Thu, 16 Apr 2026 19:11:05 -0500
Subject: [PATCH] fix: Blank query filter builder fields (#7480)

---
 .../components/Domain/QueryFilterBuilder.vue  | 60 +++++--------------
 1 file changed, 14 insertions(+), 46 deletions(-)

diff --git a/frontend/app/components/Domain/QueryFilterBuilder.vue b/frontend/app/components/Domain/QueryFilterBuilder.vue
index 7eb3a1000..14af8ed99 100644
--- a/frontend/app/components/Domain/QueryFilterBuilder.vue
+++ b/frontend/app/components/Domain/QueryFilterBuilder.vue
@@ -41,19 +41,14 @@
           >
             <v-select
               v-if="index"
-              :model-value="field.logicalOperator"
+              :model-value="field.logicalOperator?.value"
               :items="[logOps.AND, logOps.OR]"
               item-title="label"
               item-value="value"
               variant="underlined"
+              class="text-center"
               @update:model-value="setLogicalOperatorValue(field, index, $event as unknown as LogicalOperator)"
-            >
-              <template #chip="{ item }">
-                <span :class="config.select.textClass" style="width: 100%;">
-                  {{ item.raw.label }}
-                </span>
-              </template>
-            </v-select>
+            />
           </v-col>
 
           <!-- left parenthesis -->
@@ -67,14 +62,9 @@
               :model-value="field.leftParenthesis"
               :items="['', '(', '((', '(((']"
               variant="underlined"
+              class="text-center"
               @update:model-value="setLeftParenthesisValue(field, index, $event)"
-            >
-              <template #chip="{ item }">
-                <span :class="config.select.textClass" style="width: 100%;">
-                  {{ item.raw }}
-                </span>
-              </template>
-            </v-select>
+            />
           </v-col>
 
           <!-- field name -->
@@ -84,19 +74,14 @@
             :class="config.col.class"
           >
             <v-select
-              chips
               :model-value="field.label"
               :items="fieldDefs"
               variant="underlined"
               item-title="label"
+              item-value="label"
+              class="text-center"
               @update:model-value="setField(index, $event)"
-            >
-              <template #chip="{ item }">
-                <span :class="config.select.textClass" style="width: 100%;">
-                  {{ item.raw.label }}
-                </span>
-              </template>
-            </v-select>
+            />
           </v-col>
 
           <!-- relational operator -->
@@ -107,19 +92,14 @@
           >
             <v-select
               v-if="field.type !== 'boolean'"
-              :model-value="field.relationalOperatorValue"
+              :model-value="field.relationalOperatorValue?.value"
               :items="field.relationalOperatorChoices"
               item-title="label"
               item-value="value"
               variant="underlined"
+              class="text-center"
               @update:model-value="setRelationalOperatorValue(field, index, $event as unknown as RelationalKeyword | RelationalOperator)"
-            >
-              <template #chip="{ item }">
-                <span :class="config.select.textClass" style="width: 100%;">
-                  {{ item.raw.label }}
-                </span>
-              </template>
-            </v-select>
+            />
           </v-col>
 
           <!-- field value -->
@@ -275,23 +255,14 @@
               :model-value="field.rightParenthesis"
               :items="['', ')', '))', ')))']"
               variant="underlined"
+              class="text-center"
               @update:model-value="setRightParenthesisValue(field, index, $event)"
-            >
-              <template #chip="{ item }">
-                <span :class="config.select.textClass" style="width: 100%;">
-                  {{ item.raw }}
-                </span>
-              </template>
-            </v-select>
-          </v-col>
-
-          <!-- field actions -->
-          <v-col
+            />
             v-if="!$vuetify.display.smAndDown || index === fields.length - 1"
             :cols="config.items.fieldActions.cols(index)"
             :sm="config.items.fieldActions.sm(index)"
             :class="config.col.class"
-          >
+            >
             <BaseButtonGroup
               :buttons="[
                 {
@@ -723,9 +694,6 @@ const config = computed(() => {
     col: {
       class: "d-flex justify-center align-end py-0",
     },
-    select: {
-      textClass: "d-flex justify-center text-center",
-    },
     items: {
       icon: {
         cols: (_index: number) => 2,