diff --git a/app/client/src/widgets/MultiSelectWidget/component/index.tsx b/app/client/src/widgets/MultiSelectWidget/component/index.tsx index b231677d26..f6c59d1bd0 100644 --- a/app/client/src/widgets/MultiSelectWidget/component/index.tsx +++ b/app/client/src/widgets/MultiSelectWidget/component/index.tsx @@ -99,10 +99,16 @@ function MultiSelectComponent({ [isSelectAll, options, loading], ); + // Convert the values to string before searching. + // input is always a string. const filterOption = useCallback( (input, option) => - option?.props.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 || - option?.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0, + String(option?.props.label) + .toLowerCase() + .indexOf(input.toLowerCase()) >= 0 || + String(option?.props.value) + .toLowerCase() + .indexOf(input.toLowerCase()) >= 0, [], ); diff --git a/app/client/src/widgets/MultiSelectWidget/widget/index.tsx b/app/client/src/widgets/MultiSelectWidget/widget/index.tsx index 00be5cf7ad..61766e2367 100644 --- a/app/client/src/widgets/MultiSelectWidget/widget/index.tsx +++ b/app/client/src/widgets/MultiSelectWidget/widget/index.tsx @@ -71,6 +71,7 @@ class MultiSelectWidget extends BaseWidget< name: "label", type: ValidationTypes.TEXT, params: { + default: "", required: true, }, }, @@ -78,6 +79,7 @@ class MultiSelectWidget extends BaseWidget< name: "value", type: ValidationTypes.TEXT, params: { + default: "", required: true, }, }, @@ -94,7 +96,7 @@ class MultiSelectWidget extends BaseWidget< propertyName: "defaultOptionValue", label: "Default Value", controlType: "INPUT_TEXT", - placeholderText: "GREEN", + placeholderText: "[GREEN]", isBindProperty: true, isTriggerProperty: false, validation: { @@ -102,8 +104,8 @@ class MultiSelectWidget extends BaseWidget< params: { fn: defaultOptionValueValidation, expected: { - type: "value or Array of values", - example: `option1 | ['option1', 'option2']`, + type: "Array of values", + example: `['option1', 'option2']`, autocompleteDataType: AutocompleteDataType.ARRAY, }, }, diff --git a/app/client/src/workers/validations.test.ts b/app/client/src/workers/validations.test.ts index 6bcc6e1de7..6c26978b24 100644 --- a/app/client/src/workers/validations.test.ts +++ b/app/client/src/workers/validations.test.ts @@ -962,229 +962,6 @@ describe("Validate Validators", () => { expect(result).toStrictEqual(expected); }); }); - it("correctly validates objects", () => { - const inputs = [ - { - label: true, - value: "true", - }, - { - label: true, - value: "true", - }, - { - paletteColors1: "#ffffff", - palettecolors2: "#ffffff", - }, - ]; - const config = [ - { - type: ValidationTypes.OBJECT, - params: { - required: true, - allowedKeys: [ - { - name: "label", - type: ValidationTypes.TEXT, - params: { - required: true, - }, - }, - { - name: "value", - type: ValidationTypes.TEXT, - params: { - required: true, - unique: true, - }, - }, - ], - }, - }, - { - type: ValidationTypes.OBJECT, - params: { - required: true, - allowedKeys: [ - { - name: "label", - type: ValidationTypes.BOOLEAN, - params: { - required: true, - }, - }, - { - name: "value", - type: ValidationTypes.TEXT, - params: { - required: true, - unique: true, - }, - }, - ], - }, - }, - { - type: ValidationTypes.OBJECT, - params: { - allowedKeys: [ - { - name: "paletteColors1", - type: ValidationTypes.TEXT, - params: { - strict: true, - }, - }, - { - name: "paletteColors2", - type: ValidationTypes.TEXT, - params: { - strict: true, - ignoreCase: true, - }, - }, - ], - }, - }, - ]; - const expected = [ - { - isValid: true, - parsed: { - label: "true", - value: "true", - }, - }, - { - isValid: true, - parsed: { label: true, value: "true" }, - }, - { - isValid: true, - parsed: { - paletteColors1: "#ffffff", - palettecolors2: "#ffffff", - }, - }, - ]; - inputs.forEach((input, index) => { - const result = validate(config[index], input, DUMMY_WIDGET); - expect(result).toStrictEqual(expected[index]); - }); - }); - it("correctly validates objects to fail", () => { - const inputs = [ - { - labels: true, - values: "true", - }, - { - label: true, - }, - { - paletteColors1: "#ffffff", - palettecolors2: 3, - }, - ]; - const config = [ - { - type: ValidationTypes.OBJECT, - params: { - required: true, - allowedKeys: [ - { - name: "label", - type: ValidationTypes.TEXT, - params: { - required: true, - }, - }, - { - name: "value", - type: ValidationTypes.TEXT, - params: { - required: true, - unique: true, - }, - }, - ], - }, - }, - { - type: ValidationTypes.OBJECT, - params: { - required: true, - allowedKeys: [ - { - name: "label", - type: ValidationTypes.BOOLEAN, - params: { - required: true, - }, - }, - { - name: "value", - type: ValidationTypes.TEXT, - params: { - required: true, - unique: true, - }, - }, - ], - }, - }, - { - type: ValidationTypes.OBJECT, - params: { - allowedKeys: [ - { - name: "paletteColors1", - type: ValidationTypes.TEXT, - params: { - strict: true, - }, - }, - { - name: "paletteColors2", - type: ValidationTypes.TEXT, - params: { - strict: true, - ignoreCase: true, - }, - }, - ], - }, - }, - ]; - const expected = [ - { - isValid: false, - parsed: { - labels: true, - values: "true", - }, - message: "Missing required key: label Missing required key: value", - }, - { - isValid: false, - message: "Missing required key: value", - parsed: { label: true }, - }, - { - isValid: false, - message: - "Value of key: palettecolors2 is invalid: This value does not evaluate to type string", - parsed: { - paletteColors1: "#ffffff", - palettecolors2: "", - }, - }, - ]; - inputs.forEach((input, index) => { - const result = validate(config[index], input, DUMMY_WIDGET); - expect(result).toStrictEqual(expected[index]); - }); - }); }); // describe("Color Picker Text validator", () => { diff --git a/app/client/src/workers/validations.ts b/app/client/src/workers/validations.ts index f2a8825128..9a7ef08732 100644 --- a/app/client/src/workers/validations.ts +++ b/app/client/src/workers/validations.ts @@ -54,7 +54,6 @@ function validatePlainObject( if (config.params?.allowedKeys) { let _valid = true; const _messages: string[] = []; - const parsedValue: Record = value; config.params.allowedKeys.forEach((entry) => { const ignoreCase = !!entry.params?.ignoreCase; const entryName = getPropertyEntry(value, entry.name, ignoreCase); @@ -65,7 +64,6 @@ function validatePlainObject( value[entryName], props, ); - parsedValue[entryName] = parsed; if (!isValid) { value[entryName] = parsed; _valid = isValid; @@ -80,7 +78,7 @@ function validatePlainObject( if (_valid) { return { isValid: true, - parsed: parsedValue, + parsed: value, }; } return { @@ -119,7 +117,7 @@ function validateArray( config.params?.children?.type === ValidationTypes.OBJECT && (config.params.children.params?.allowedKeys || []).length > 0 ) { - const allowedKeysConfigArray = + const allowedKeysCofigArray = config.params.children.params?.allowedKeys || []; const allowedKeys = (config.params.children.params?.allowedKeys || []).map( @@ -131,7 +129,7 @@ function validateArray( }; const valueWithType = value as ItemType[]; - allowedKeysConfigArray.forEach((allowedKeyConfig) => { + allowedKeysCofigArray.forEach((allowedKeyConfig) => { if (allowedKeyConfig.params?.unique) { const allowedKeyValues = valueWithType.map( (item) => item[allowedKeyConfig.name], @@ -354,6 +352,7 @@ export const VALIDATORS: Record = { isValid: false, }; } + return { isValid: true, parsed,