Fixed the issues found while testing with sdktest app (#309)

* Fixed the issues found while testing with sdktest app

* updated function name in autocomplete

* updated userreference based on comment

---------

Co-authored-by: mohas22 <[email protected]>

Author: samhere06

packages/angular-sdk-components/src/lib/_components/field/auto-complete/auto-complete.component.html

@@ -11,7 +11,6 @@
           [placeholder]="placeholder"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"
-          [value]="value$"
           [required]="bRequired$"
           [matAutocomplete]="auto"
           (input)="fieldOnChange($event)"

packages/angular-sdk-components/src/lib/_components/field/auto-complete/auto-complete.component.ts

@@ -14,6 +14,10 @@ import { DatapageService } from '../../../_services/datapage.service';
 import { handleEvent } from '../../../_helpers/event-util';
 import { PConnFieldProps } from '../../../_types/PConnProps.interface';
 
+interface IOption {
+  key: string;
+  value: string;
+}
 interface AutoCompleteProps extends PConnFieldProps {
   // If any, enter additional props that only exist on AutoComplete here
   deferDatasource?: boolean;
@@ -108,6 +112,13 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
     );
   }
 
+  setOptions(options: IOption[]) {
+    this.options$ = options;
+    const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
+    this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
+    this.fieldControl.setValue(this.value$);
+  }
+
   ngOnDestroy(): void {
     if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
@@ -149,6 +160,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
     if (this.configProps$.value != undefined) {
       const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
       this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
+      this.fieldControl.setValue(this.value$);
     }
 
     this.setPropertyValuesFromProps();
@@ -191,7 +203,8 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
 
     this.componentReference = this.pConn$.getStateProps().value;
     if (this.listType === 'associated') {
-      this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
+      const optionsList = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
+      this.setOptions(optionsList);
     }
 
     if (!this.displayMode$ && this.listType !== 'associated') {
@@ -263,7 +276,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
       };
       optionsData.push(obj);
     });
-    this.options$ = optionsData;
+    this.setOptions(optionsData);
   }
 
   flattenParameters(params = {}) {

packages/angular-sdk-components/src/lib/_components/field/list-view-action-buttons/list-view-action-buttons.component.ts

@@ -31,10 +31,11 @@ export class ListViewActionButtonsComponent {
     this.pConn$
       .getActionsApi()
       .submitEmbeddedDataModal(this.context$)
-      .then(() => {})
+      .then(() => {
+        this.closeActionsDialog.emit();
+      })
       .finally(() => {
         this.isDisabled = false;
       });
-    this.closeActionsDialog.emit();
   }
 }

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

@@ -168,7 +168,11 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     this.placeholder = placeholder || '';
     this.displayMode$ = displayMode;
 
-    this.value$ = value && typeof value === 'object' && value.userName ? value.userName : (value ?? '');
+    if (value && typeof value === 'object') {
+      this.value$ = value.userName ? value.userName : '';
+    } else {
+      this.value$ = value || '';
+    }
 
     const { readOnly, required } = props;
     [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));

packages/angular-sdk-components/src/lib/_components/template/simple-table-manual/simple-table-manual.component.scss

@@ -5,6 +5,10 @@
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   overflow-y: auto;
+  box-shadow:
+    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
 }
 
 table {