Merge pull request #764 from dxc-technology/jcheng-selectDefaultValue

[Minor] Adding default value to select component

Author: aidamag

projects/dxc-ngx-cdk-site/src/app/components/examples/select/select-properties/select-properties.component.html

@@ -28,6 +28,13 @@
       the value will be managed internally by the component.
     </td>
   </tr>
+  <tr>
+    <td>defaultValue: string | string[]</td>
+    <td></td>
+    <td>
+      Default value given to the select and also maintains the uncontrolled behaviour.
+    </td>
+  </tr>
   <tr>
     <td>options: Option[] | OptionGroup[]</td>
     <td></td>

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.html

@@ -70,6 +70,15 @@
         [value]="arrayValue"
       >
       </dxc-select>
+      <dxc-select
+        label="default value"
+        helperText="HelperText"
+        multiple="true"
+        margin="xsmall"
+        [options]="array1"
+        [defaultValue]="arrayValue"
+      >
+      </dxc-select>
       <dxc-select
         label="Label"
         helperText="HelperText"
@@ -136,6 +145,31 @@
     >
     </dxc-select>
 
+    <dxc-select
+      label="defaultvalue searchable"
+      helperText="HelperText"
+      margin="xsmall"
+      [defaultValue]="selectedValues"
+      [options]="array1"
+      placeholder="Another placeholder"
+      size="large"
+      searchable="true"
+      tabIndex="3"
+    >
+    </dxc-select>
+
+    <dxc-select
+      label="defaultvalue single"
+      helperText="HelperText"
+      margin="xsmall"
+      [defaultValue]="selectedValues"
+      [options]="array1"
+      placeholder="Another placeholder"
+      size="large"
+      tabIndex="3"
+    >
+    </dxc-select>
+
     <dxc-select
       label="Controlled not optional"
       helperText="HelperText"

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.ts

@@ -7,7 +7,7 @@ import { OptionGroup } from "@dxc-technology/halstack-angular/lib/dxc-select/int
   templateUrl: "./select-preview.component.html",
 })
 export class SelectPreviewComponent implements OnInit {
-  selectedValues: string = "";
+  selectedValues: string = "1";
   array1: Option[] = [
     {
       label: "label1",

projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.spec.ts

@@ -55,6 +55,43 @@ describe("DxcSelectComponent tests", () => {
     expect(dxcSelect.getByText("label1"));
   });
 
+  test("dxc-select defaultValue functionality", async () => {
+    const array1: Option[] = [
+      { label: "label1", value: "1" },
+      { label: "label2", value: "2" },
+      { label: "label6", value: "6" },
+      { label: "label9", value: "9" },
+      { label: "aida", value: "10" },
+      { label: "pepe", value: "11" },
+    ];
+    const changeMock = jest.fn((x) => {});
+    const dxcSelect = await render(DxcSelectComponent, {
+      componentProperties: {
+        label: "Select label",
+        helperText: "Helper Text",
+        options: array1,
+        onChange: {
+          emit: changeMock,
+        } as any,
+        defaultValue: "1",
+      },
+      imports: [DxcSelectModule],
+      excludeComponentDeclaration: true,
+    });
+    expect(dxcSelect.getByText("Select label"));
+    expect(dxcSelect.getByText("Helper Text"));
+    expect(dxcSelect.getByText("label1"));
+    fireEvent.click(dxcSelect.getByRole("combobox"));
+    expect(screen.getAllByText("label1")[1].getAttribute("aria-selected")).toBe(
+      "true"
+    );
+    fireEvent.click(screen.getByText("aida"));
+    expect(changeMock).toHaveBeenCalledWith({ value: "10", error: null });
+    fireEvent.click(dxcSelect.getByRole("combobox"));
+    expect(dxcSelect.getByText("aida"));
+    
+  });
+
   test("dxc-select single controlled functionality", async () => {
     const array1: Option[] = [
       { label: "label1", value: "1" },

projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.ts

@@ -29,6 +29,7 @@ interface SelectProperties {
   label: string;
   name: string;
   value: string | string[];
+  defaultValue: string | string[];
   placeholder: string;
   helperText: string;
   searchable: boolean;
@@ -68,6 +69,9 @@ export class DxcSelectComponent implements OnInit, ControlValueAccessor {
   @Input()
   value: string | string[];
 
+  @Input()
+  defaultValue: string | string[];
+
   @Input()
   helperText: string;
 
@@ -129,6 +133,7 @@ export class DxcSelectComponent implements OnInit, ControlValueAccessor {
     label: "",
     name: "",
     value: null,
+    defaultValue: null,
     placeholder: "",
     helperText: "",
     searchable: false,
@@ -237,6 +242,10 @@ export class DxcSelectComponent implements OnInit, ControlValueAccessor {
       ...this.defaultInputs.getValue(),
     })}`;
     this.controlled = this.value || this.value === "" ? true : false;
+    if (this.defaultValue || this.defaultValue === "" && !this.controlled) {
+      this.value = this.defaultValue;
+      this.setDefaultValues();
+    }
     this.service.visualFocused.subscribe((value) => {
       this.focusedOption = value;
       this.setActiveDescendantAttr();