Merge pull request #12138 from appsmithorg/fix/multiselect-prepopulate-value-with-number

fix: Allow Multiselect DefaultValue to accept numbers

app/client/src/widgets/MultiSelectWidgetV2/widget/index.test.tsx

@@ -14,7 +14,7 @@ describe("defaultOptionValueValidation - ", () => {
     });
   });
 
-  it("should get tested with array of strings|number", () => {
+  it("should get tested with array of strings", () => {
     const input = ["green", "red"];
 
     expect(
@@ -26,6 +26,31 @@ describe("defaultOptionValueValidation - ", () => {
     });
   });
 
+  it("should get tested with a number", () => {
+    const input = 2022;
+
+    expect(
+      defaultOptionValueValidation(input, {} as MultiSelectWidgetProps, _),
+    ).toEqual({
+      isValid: true,
+      parsed: [input],
+      messages: [""],
+    });
+  });
+  it("should get tested with a string", () => {
+    const inputs = ["2022", "true", "null", "test", "undefined"];
+
+    inputs.forEach((input) => {
+      expect(
+        defaultOptionValueValidation(input, {} as MultiSelectWidgetProps, _),
+      ).toEqual({
+        isValid: true,
+        parsed: [input],
+        messages: [""],
+      });
+    });
+  });
+
   it("should get tested with array json string", () => {
     const input = `["green", "red"]`;
 
@@ -68,8 +93,9 @@ describe("defaultOptionValueValidation - ", () => {
     });
   });
 
-  it("should get tested with comma seperated strings", () => {
+  it("should get tested with comma separated strings", () => {
     const input = "green, red";
+    const input2 = "1, 2";
 
     expect(
       defaultOptionValueValidation(input, {} as MultiSelectWidgetProps, _),
@@ -78,6 +104,13 @@ describe("defaultOptionValueValidation - ", () => {
       parsed: ["green", "red"],
       messages: [""],
     });
+    expect(
+      defaultOptionValueValidation(input2, {} as MultiSelectWidgetProps, _),
+    ).toEqual({
+      isValid: true,
+      parsed: ["1", "2"],
+      messages: [""],
+    });
   });
 
   it("should get tested with simple string", () => {

app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import BaseWidget, { WidgetProps, WidgetState } from "widgets/BaseWidget";
 import { WidgetType } from "constants/WidgetConstants";
 import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
-import { isArray, isString, isNumber } from "lodash";
+import { isArray, isString, isNumber, LoDashStatic } from "lodash";
 import {
   ValidationResponse,
   ValidationTypes,
@@ -20,12 +20,15 @@ import { AutocompleteDataType } from "utils/autocomplete/TernServer";
 export function defaultOptionValueValidation(
   value: unknown,
   props: MultiSelectWidgetProps,
-  _: any,
+  _: LoDashStatic,
 ): ValidationResponse {
-  let isValid;
-  let parsed;
+  let isValid = false;
+  let parsed: any[] = [];
   let message = "";
 
+  const DEFAULT_ERROR_MESSAGE =
+    "value should match: Array<string | number> | Array<{label: string, value: string | number}>";
+
   /*
    * Function to check if the object has `label` and `value`
    */
@@ -51,12 +54,16 @@ export function defaultOptionValueValidation(
   /*
    * When value is "['green', 'red']", "[{label: 'green', value: 'green'}]" and "green, red"
    */
-  if (_.isString(value) && (value as string).trim() !== "") {
+  if (_.isString(value) && value.trim() !== "") {
     try {
       /*
        * when value is "['green', 'red']", "[{label: 'green', value: 'green'}]"
        */
-      value = JSON.parse(value as string);
+      const parsedValue = JSON.parse(value);
+      // Only parse value if resulting value is an array or string
+      if (Array.isArray(parsedValue) || _.isString(parsedValue)) {
+        value = parsedValue;
+      }
     } catch (e) {
       /*
        * when value is "green, red", JSON.parse throws error
@@ -67,21 +74,18 @@ export function defaultOptionValueValidation(
     }
   }
 
-  if (_.isString(value) && (value as string).trim() === "") {
-    isValid = true;
-    parsed = [];
-    message = "";
-  } else if (Array.isArray(value)) {
+  /*
+   * When value is "['green', 'red']", "[{label: 'green', value: 'green'}]" and "green, red"
+   */
+  if (Array.isArray(value)) {
     if (value.every((val) => _.isString(val) || _.isFinite(val))) {
       /*
        * When value is ["green", "red"]
        */
-      if (hasUniqueValues(value as [])) {
+      if (hasUniqueValues(value)) {
         isValid = true;
         parsed = value;
-        message = "";
       } else {
-        isValid = false;
         parsed = [];
         message = "values must be unique. Duplicate values found";
       }
@@ -89,12 +93,10 @@ export function defaultOptionValueValidation(
       /*
        * When value is [{label: "green", value: "red"}]
        */
-      if (hasUniqueValues(value.map((val) => val.value) as [])) {
+      if (hasUniqueValues(value.map((val) => val.value))) {
         isValid = true;
         parsed = value;
-        message = "";
       } else {
-        isValid = false;
         parsed = [];
         message = "path:value must be unique. Duplicate values found";
       }
@@ -102,19 +104,35 @@ export function defaultOptionValueValidation(
       /*
        * When value is [true, false], [undefined, undefined] etc.
        */
-      isValid = false;
       parsed = [];
-      message =
-        "value should match: Array<string | number> | Array<{label: string, value: string | number}>";
+      message = DEFAULT_ERROR_MESSAGE;
     }
+
+    return {
+      isValid,
+      parsed,
+      messages: [message],
+    };
+  }
+
+  /*
+   * When value is an empty string
+   */
+  if (_.isString(value) && value.trim() === "") {
+    isValid = true;
+    parsed = [];
+  } else if (_.isNumber(value) || _.isString(value)) {
+    /*
+     * When value is a number or just a single string e.g "Blue"
+     */
+    isValid = true;
+    parsed = [value];
   } else {
     /*
      * When value is undefined, null, {} etc.
      */
-    isValid = false;
     parsed = [];
-    message =
-      "value should match: Array<string | number> | Array<{label: string, value: string | number}>";
+    message = DEFAULT_ERROR_MESSAGE;
   }
 
   return {