diff --git a/app/client/src/widgets/MultiSelectWidgetV2/widget/index.test.tsx b/app/client/src/widgets/MultiSelectWidgetV2/widget/index.test.tsx index 9762e057a2..79f08067ee 100644 --- a/app/client/src/widgets/MultiSelectWidgetV2/widget/index.test.tsx +++ b/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", () => { diff --git a/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx b/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx index af3ce7ba8a..cb05cce6c7 100644 --- a/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx +++ b/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 | 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 | 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 | Array<{label: string, value: string | number}>"; + message = DEFAULT_ERROR_MESSAGE; } return {