[Bug]-[100]:MultiSelectTree and TreeSelect unable to select an option whose value is with parentheses

[cheshenglin]

Is there an existing issue for this?

• I have searched the existing issues

Description

When I use a MultiSelectTreeWidget with some option whose value is with a parentheses character, the option value would not show in selectedOptionValues, even the UI is selected as usual. After test with another similar widgets, I found only MultiSelectTreeWidget got such bug. And not only parentheses, curly and square brackets, are also went wrong. I think it may cause by the regular expression in getDerivedPropertiesMap function.

see also:

appsmith/app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx

Line 341 in 787df86

'{{ this.selectedOptionValueArr.filter((o) => JSON.stringify(this.options).match(new RegExp(`"value":"${o}"`, "g")) )}}',

Steps To Reproduce

1. Add a MultiSelectTreeWidget with Options as following: [ { "label": "abc", "value": "abc (abc)" }]
2. Add a Text Widget with Text to show the selected values: {{MyTreeWidget.selectedOptionValues}}
3. Select the option label "abc" and see the text widget shows.

Public Sample App

No response

Version

Cloud v1.6.17-SNAPSHOT

[dilippitchika]

Assuming 1% of widget users face this

Stats

Stat	Values
Reach	25
Effort (months)	0.5