Fix User Reference issues

packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.html

@@ -8,13 +8,7 @@
     </div>
     <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
-        <mat-select
-          [value]="value$"
-          [required]="bRequired$"
-          [formControl]="fieldControl"
-          [attr.data-test-id]="testId"
-          (selectionChange)="fieldOnChange($event)"
-        >
+        <mat-select [required]="bRequired$" [formControl]="fieldControl" [attr.data-test-id]="testId" (selectionChange)="fieldOnChange($event)">
           <mat-option *ngFor="let opt of options$" [value]="opt.key">
             {{ opt.value }}
           </mat-option>
@@ -32,14 +26,12 @@
           matInput
           [placeholder]="placeholder"
           [formControl]="fieldControl"
-          [value]="value$"
           [required]="bRequired$"
           [matAutocomplete]="auto"
           [attr.data-test-id]="testId"
-          (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
-        <mat-autocomplete #auto="matAutocomplete">
+        <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption (optionSelected)="optionChanged($event)">
           <mat-option *ngFor="let opt of filteredOptions | async" [value]="opt.value">
             <span>{{ opt.value }}</span>
           </mat-option>

packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.ts

@@ -23,6 +23,7 @@ interface UserReferenceProps extends Omit<PConnFieldProps, 'value'> {
   value?: any;
   showAsFormattedText?: boolean;
   additionalProps?: object;
+  onRecordChange?: any;
 }
 
 @Component({
@@ -66,6 +67,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   fieldControl = new FormControl('', null);
   actionsApi: Object;
   propName: string;
+  onRecordChange: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -83,11 +85,11 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
-      this.fieldControl.setValue(this.value$);
+      this.fieldControl.setValue(this.getValue(this.value$));
     }
 
     this.filteredOptions = this.fieldControl.valueChanges.pipe(
-      startWith(''),
+      startWith(this.getValue(this.value$) || ''),
       map(value => this._filter(value || ''))
     );
   }
@@ -126,6 +128,21 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal));
   }
 
+  isUserNameAvailable = user => {
+    return typeof user === 'object' && user !== null && user.userName;
+  };
+
+  getUserName = user => {
+    return user.userName;
+  };
+
+  getValue = user => {
+    if (this.displayAs$ === DROPDOWN_LIST) {
+      return this.utils.getUserId(user) || this.getUserName(user);
+    }
+    return this.isUserNameAvailable(user) ? this.getUserName(user) : this.utils.getUserId(user);
+  };
+
   async checkAndUpdate() {
     // Should always check the bridge to see if the component should
     // update itself (re-render)
@@ -140,6 +157,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   async updateSelf() {
     const props = this.pConn$.getConfigProps() as UserReferenceProps;
     this.testId = props.testId;
+    this.onRecordChange = props?.onRecordChange;
 
     const { label, displayAs, value, showAsFormattedText, helperText, placeholder, displayMode } = props;
 
@@ -150,20 +168,18 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     this.placeholder = placeholder || '';
     this.displayMode$ = displayMode;
 
+    this.value$ = this.pConn$.getConfigProps()?.value;
+
     const { readOnly, required } = props;
     [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
 
     this.actionsApi = this.pConn$.getActionsApi();
     this.propName = this.pConn$.getStateProps().value;
 
-    const isUserNameAvailable = user => {
-      return typeof user === 'object' && user !== null && user.userName;
-    };
-
     this.userID$ = this.utils.getUserId(value);
 
     if (this.userID$ && this.bReadonly$ && this.showAsFormattedText$) {
-      if (isUserNameAvailable(value)) {
+      if (this.isUserNameAvailable(value)) {
         this.userName$ = value.userName;
       } else {
         // if same user ref field is referred in view as editable & readonly formatted text
@@ -201,7 +217,12 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     if (event?.target) {
       this.filterValue = (event.target as HTMLInputElement).value;
     }
-    const value = event?.target?.value;
+    const value = event?.value;
+    handleEvent(this.actionsApi, 'change', this.propName, value);
+  }
+
+  optionChanged(event: any) {
+    const value = event?.option?.value;
     handleEvent(this.actionsApi, 'change', this.propName, value);
   }
 
@@ -211,11 +232,12 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
       const index = this.options$?.findIndex(element => element.value === event.target.value);
       key = index > -1 ? (key = this.options$[index].key) : event.target.value;
     }
-
-    const value = {
-      value: key
-    };
+    const value = key;
     handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    if (this.onRecordChange) {
+      event.target.value = value;
+      this.onRecordChange(event);
+    }
   }
 
   getErrorMessage() {