diff --git a/ayanova/src/components/work-order-contact.vue b/ayanova/src/components/work-order-contact.vue
index 978c5423..bcde66c4 100644
--- a/ayanova/src/components/work-order-contact.vue
+++ b/ayanova/src/components/work-order-contact.vue
@@ -1,13 +1,21 @@
 <template>
   <div>
-    <v-text-field
+    <!-- <v-text-field
       ref="customerContactName"
       dense
+      v-model="value.customerContactName"
       v-bind="$attrs"
       prepend-icon="$ayiUsers"
       v-on="$listeners"
       @click:prepend="fetchContacts"
       @input="fieldValueChanged('customerContactName')"
+    ></v-text-field> -->
+    <v-text-field
+      dense
+      v-bind="$attrs"
+      prepend-icon="$ayiUsers"
+      v-on="$listeners"
+      @click:prepend="fetchContacts"
     ></v-text-field>
 
     <!-- ################################################################################-->
@@ -48,10 +56,10 @@
 <script>
 export default {
   props: {
-    value: {
-      default: null,
-      type: Object
-    },
+    // value: {
+    //   default: null,
+    //   type: Object
+    // },
     pvm: {
       default: null,
       type: Object
@@ -70,15 +78,37 @@ export default {
     };
   },
   methods: {
-    fetchContacts() {
+    async fetchContacts() {
+      if (this.pvm.obj.customerId == null || this.pvm.obj.customerId == 0) {
+        return;
+      }
+
       //get a list of contacts from the server for this customer
-      //open a dialog to pick one
-      //if chosen then put it as the value
-      this.openDialog = true;
+
+      const res = await window.$gz.api.get(
+        `customer/contact-name-list/${this.pvm.obj.customerId}`
+      );
+      if (res.error) {
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          window.$gz.errorHandler.errorToString(res, this)
+        );
+      } else {
+        this.contacts = res.data;
+
+        //open a dialog to pick one
+        //if chosen then put it as the value
+        this.openDialog = true;
+      }
     },
     useSelectedContact() {
-      this.value.customerContactName = this.selectedContact;
+      this.pvm.obj.customerContactName = this.selectedContact;
       this.pvm.formState.dirty = true;
+
+      this.pvm.obj.isDirty = true;
+
+      // this.$emit("change");
+
       this.openDialog = false;
     },
     fieldValueChanged(ref) {
diff --git a/ayanova/src/components/work-order-header.vue b/ayanova/src/components/work-order-header.vue
index 9cfadcfd..08d78052 100644
--- a/ayanova/src/components/work-order-header.vue
+++ b/ayanova/src/components/work-order-header.vue
@@ -306,9 +306,9 @@
         lg="4"
         xl="3"
       >
-        <gz-wo-contact
+        <GzWoContact
           ref="customerContactName"
-          v-model="value"
+          v-model="value.customerContactName"
           :pvm="pvm"
           dense
           :readonly="
@@ -320,7 +320,8 @@
           :label="$ay.t('WorkOrderCustomerContactName')"
           data-cy="customerContactName"
           :error-messages="form().serverErrors(this, 'customerContactName')"
-        ></gz-wo-contact>
+          @input="fieldValueChanged('customerContactName')"
+        ></GzWoContact>
       </v-col>
 
       <v-col