I am trying to use the Cascader component to make a nested dropdown menu. I am using a JSON similar to this one below per this post to populate the component with data. I am trying to programmatically set the value of the Cascader component, but nothing I've tried is working. If the current displayValue is "Meats / Beef", and I want to change it to "Mushrooms / Other", how would I do so?
I've already tried running cascader1.setValue( [ "Mushrooms", "Other" ] ); as well as cascader1.setValue( [ 1, 2 ] ); to no success.
What am I doing wrong here?
[
{
"value": 0,
"label": "Meats",
"children": [
{
"value": 0,
"label": "Beef"
},
{
"value": 1,
"label": "Chicken"
},
{
"value": 2,
"label": "Pork"
},
{
"value": 3,
"label": "Fish"
}
]
},
{
"value": 1,
"label": "Mushrooms",
"children": [
{
"value": 0,
"label": "Oyster"
},
{
"value": 1,
"label": "Wood Ear"
},
{
"value": 2,
"label": "Other"
}
]
}
]
Edit: (copied from a comment below)
Forgot to give more context:
Retool self hosted v3.16.7
Here is the exported JSON of a project I set up to enable this functionality.
{"uuid":"3e747d34-7f45-11ee-bef6-4b373b28d343","page":{"id":479,"data":{"appState":"[\"~#iR\",[\"^ \",\"n\",\"appTemplate\",\"v\",[\"^ \",\"isFetching\",false,\"plugins\",[\"~#iOM\",[\"cascader1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"cascader1\",\"uuid\",\"4223fa54-f976-4bec-9024-82faf399d639\",\"type\",\"widget\",\"subtype\",\"CascaderWidget\",\"namespace\",null,\"resourceName\",null,\"resourceDisplayName\",null,\"template\",[\"^3\",[\"displayValue\",\"\",\"tooltipText\",\"\",\"value\",[],\"placeholder\",\"\",\"structure\",\"[\\n {\\n \\\"value\\\": 0,\\n \\\"label\\\": \\\"Meats\\\",\\n \\\"children\\\": [\\n {\\n \\\"value\\\": 0,\\n \\\"label\\\": \\\"Beef\\\"\\n },\\n {\\n \\\"value\\\": 1,\\n \\\"label\\\": \\\"Chicken\\\"\\n },\\n {\\n \\\"value\\\": 2,\\n \\\"label\\\": \\\"Pork\\\"\\n },\\n {\\n \\\"value\\\": 3,\\n \\\"label\\\": \\\"Fish\\\"\\n }\\n ]\\n },\\n {\\n \\\"value\\\": 1,\\n \\\"label\\\": \\\"Mushrooms\\\",\\n \\\"children\\\": [\\n {\\n \\\"value\\\": 0,\\n \\\"label\\\": \\\"Oyster\\\"\\n },\\n {\\n \\\"value\\\": 1,\\n \\\"label\\\": \\\"Wood Ear\\\"\\n },\\n {\\n \\\"value\\\": 2,\\n \\\"label\\\": \\\"Other\\\"\\n }\\n ]\\n }\\n]\",\"label\",\"Categories\",\"labelMaxWidth\",\"\",\"labelPlacedOnLeft\",false,\"onSelect\",\"\",\"disabled\",\"\",\"hideClearButton\",false,\"required\",false]],\"style\",[\"^3\",[]],\"position2\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"container\",\"\",\"rowGroup\",\"body\",\"subcontainer\",\"\",\"row\",1.8,\"col\",4,\"height\",1,\"width\",4,\"tabNum\",0]]],\"mobilePosition2\",null,\"mobileAppPosition\",null,\"tabIndex\",null,\"^=\",\"\",\"createdAt\",\"~m1699564604625\",\"updatedAt\",\"~m1699564619629\",\"folder\",\"\",\"screen\",null]]],\"$main\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"$main\",\"^4\",null,\"^5\",\"frame\",\"^6\",\"Frame\",\"^7\",null,\"^8\",null,\"^9\",null,\"^:\",[\"^3\",[\"type\",\"main\",\"sticky\",null,\"paddingType\",\"normal\",\"enableFullBleed\",false,\"isHiddenOnDesktop\",false,\"isHiddenOnMobile\",false]],\"^;\",[\"^3\",[]],\"^<\",null,\"^C\",null,\"^D\",null,\"^E\",null,\"^=\",\"\",\"^F\",\"~m1699564604644\",\"^G\",\"~m1699564604644\",\"^H\",\"\",\"^I\",null]]],\"button1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"button1\",\"^4\",\"d6554022-cdc8-43af-9e81-ed18d6886f7f\",\"^5\",\"widget\",\"^6\",\"ButtonWidget2\",\"^7\",null,\"^8\",null,\"^9\",null,\"^:\",[\"^3\",[\"horizontalAlign\",\"stretch\",\"clickable\",false,\"iconAfter\",\"\",\"submitTargetId\",null,\"marginType\",\"normal\",\"hidden\",false,\"text\",\"Button\",\"showInEditor\",false,\"tooltipText\",\"\",\"styleVariant\",\"solid\",\"submit\",false,\"iconBefore\",\"\",\"events\",[\"~#iL\",[[\"^3\",[\"event\",\"click\",\"type\",\"widget\",\"method\",\"setValue\",\"pluginId\",\"cascader1\",\"targetId\",null,\"params\",[\"^3\",[\"value\",\"[ \\\"Mushrooms\\\", \\\"Other\\\" ]\"]],\"waitType\",\"debounce\",\"waitMs\",\"0\"]]]],\"loading\",false,\"loaderPosition\",\"auto\",\"disabled\",false,\"maintainSpaceWhenHidden\",false]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^=\",\"\",\"^>\",\"body\",\"^?\",\"\",\"row\",4.4,\"col\",5,\"^@\",1,\"^A\",3,\"^B\",0]]],\"^C\",null,\"^D\",null,\"^E\",null,\"^=\",\"\",\"^F\",\"~m1699564631054\",\"^G\",\"~m1699564667301\",\"^H\",\"\",\"^I\",null]]]]],\"^F\",null,\"version\",\"3.16.7\",\"appThemeId\",null,\"appThemeName\",null,\"appMaxWidth\",\"100%\",\"preloadedAppJavaScript\",null,\"preloadedAppJSLinks\",[],\"testEntities\",[],\"tests\",[],\"appStyles\",\"\",\"responsiveLayoutDisabled\",false,\"loadingIndicatorsDisabled\",false,\"urlFragmentDefinitions\",[\"^J\",[]],\"pageLoadValueOverrides\",[\"^J\",[]],\"customDocumentTitle\",\"\",\"customDocumentTitleEnabled\",false,\"customShortcuts\",[],\"isGlobalWidget\",false,\"isMobileApp\",false,\"isFormApp\",false,\"shortlink\",false,\"multiScreenMobileApp\",false,\"mobileAppSettings\",[\"^ \",\"mobileOfflineModeEnabled\",false,\"mobileOfflineModeDelaySync\",false,\"mobileOfflineModeBannerMode\",\"default\",\"displaySetting\",[\"^ \",\"landscapeMode\",false,\"tabletMode\",false]],\"folders\",[\"^J\",[]],\"queryStatusVisibility\",false,\"markdownLinkBehavior\",\"auto\",\"inAppRetoolPillAppearance\",\"NO_OVERRIDE\",\"rootScreen\",null,\"instrumentationEnabled\",false,\"experimentalFeatures\",[\"^ \",\"sourceControlTemplateDehydration\",false,\"multiplayerEditingEnabled\",false,\"disableMultiplayerEditing\",false],\"experimentalPerfFeatures\",[\"^ \",\"useRuntimeV2\",true,\"runtimeV2OptOut\",false],\"experimentalStabilityFeatures\",[\"^ \",\"lockModelForUpdates\",false],\"experimentalDataTabEnabled\",true]]]"},"changesRecord":[{"type":"WIDGET_TEMPLATE_UPDATE","payload":{"plugin":{"id":"button1","type":"widget","uuid":"d6554022-cdc8-43af-9e81-ed18d6886f7f","style":{},"folder":"","subtype":"ButtonWidget2","template":{"text":"Button","events":[{"type":"widget","event":"click","method":"setValue","params":{"value":"[ 1, 1 ]"},"waitMs":"0","pluginId":"cascader1","waitType":"debounce"}],"hidden":false,"submit":false,"loading":false,"disabled":false,"clickable":false,"iconAfter":"","iconBefore":"","marginType":"normal","tooltipText":"","showInEditor":false,"styleVariant":"solid","loaderPosition":"auto","submitTargetId":null,"horizontalAlign":"stretch","maintainSpaceWhenHidden":false},"container":"","createdAt":"2023-11-09T21:17:11.054Z","position2":{"col":5,"row":4.4,"width":3,"height":1,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2023-11-09T21:17:23.231Z"},"update":{"events":[{"type":"widget","event":"click","method":"setValue","params":{"value":"[ ]"},"waitMs":"0","pluginId":"cascader1","waitType":"debounce"}]},"widgetId":"button1","shouldRecalculateTemplate":true},"isUserTriggered":true},{"type":"WIDGET_TEMPLATE_UPDATE","payload":{"plugin":{"id":"button1","type":"widget","uuid":"d6554022-cdc8-43af-9e81-ed18d6886f7f","style":{},"folder":"","subtype":"ButtonWidget2","template":{"text":"Button","events":[{"type":"widget","event":"click","method":"setValue","params":{"value":"[ ]"},"waitMs":"0","pluginId":"cascader1","waitType":"debounce"}],"hidden":false,"submit":false,"loading":false,"disabled":false,"clickable":false,"iconAfter":"","iconBefore":"","marginType":"normal","tooltipText":"","showInEditor":false,"styleVariant":"solid","loaderPosition":"auto","submitTargetId":null,"horizontalAlign":"stretch","maintainSpaceWhenHidden":false},"container":"","createdAt":"2023-11-09T21:17:11.054Z","position2":{"col":5,"row":4.4,"width":3,"height":1,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2023-11-09T21:17:41.363Z"},"update":{"events":[{"type":"widget","event":"click","method":"setValue","params":{"value":"[ \"m\" ]"},"waitMs":"0","pluginId":"cascader1","waitType":"debounce"}]},"widgetId":"button1","shouldRecalculateTemplate":true},"isUserTriggered":true},{"type":"WIDGET_TEMPLATE_UPDATE","payload":{"plugin":{"id":"button1","type":"widget","uuid":"d6554022-cdc8-43af-9e81-ed18d6886f7f","style":{},"folder":"","subtype":"ButtonWidget2","template":{"text":"Button","events":[{"type":"widget","event":"click","method":"setValue","params":{"value":"[ \"m\" ]"},"waitMs":"0","pluginId":"cascader1","waitType":"debounce"}],"hidden":false,"submit":false,"loading":false,"disabled":false,"clickable":false,"iconAfter":"","iconBefore":"","marginType":"normal","tooltipText":"","showInEditor":false,"styleVariant":"solid","loaderPosition":"auto","submitTargetId":null,"horizontalAlign":"stretch","maintainSpaceWhenHidden":false},"container":"","createdAt":"2023-11-09T21:17:11.054Z","position2":{"col":5,"row":4.4,"width":3,"height":1,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2023-11-09T21:17:42.355Z"},"update":{"events":[{"type":"widget","event":"click","method":"setValue","params":{"value":"[ \"Mush\" ]"},"waitMs":"0","pluginId":"cascader1","waitType":"debounce"}]},"widgetId":"button1","shouldRecalculateTemplate":true},"isUserTriggered":true},{"type":"WIDGET_TEMPLATE_UPDATE","payload":{"plugin":{"id":"button1","type":"widget","uuid":"d6554022-cdc8-43af-9e81-ed18d6886f7f","style":{},"folder":"","subtype":"ButtonWidget2","template":{"text":"Button","events":[{"type":"widget","event":"click","method":"setValue","params":{"value":"[ \"Mush\" ]"},"waitMs":"0","pluginId":"cascader1","waitType":"debounce"}],"hidden":false,"submit":false,"loading":false,"disabled":false,"clickable":false,"iconAfter":"","iconBefore":"","marginType":"normal","tooltipText":"","showInEditor":false,"styleVariant":"solid","loaderPosition":"auto","submitTargetId":null,"horizontalAlign":"stretch","maintainSpaceWhenHidden":false},"container":"","createdAt":"2023-11-09T21:17:11.054Z","position2":{"col":5,"row":4.4,"width":3,"height":1,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2023-11-09T21:17:43.731Z"},"update":{"events":[{"type":"widget","event":"click","method":"setValue","params":{"value":"[ \"Mushrooms\" ]"},"waitMs":"0","pluginId":"cascader1","waitType":"debounce"}]},"widgetId":"button1","shouldRecalculateTemplate":true},"isUserTriggered":true},{"type":"WIDGET_TEMPLATE_UPDATE","payload":{"plugin":{"id":"button1","type":"widget","uuid":"d6554022-cdc8-43af-9e81-ed18d6886f7f","style":{},"folder":"","subtype":"ButtonWidget2","template":{"text":"Button","events":[{"type":"widget","event":"click","method":"setValue","params":{"value":"[ \"Mushrooms\" ]"},"waitMs":"0","pluginId":"cascader1","waitType":"debounce"}],"hidden":false,"submit":false,"loading":false,"disabled":false,"clickable":false,"iconAfter":"","iconBefore":"","marginType":"normal","tooltipText":"","showInEditor":false,"styleVariant":"solid","loaderPosition":"auto","submitTargetId":null,"horizontalAlign":"stretch","maintainSpaceWhenHidden":false},"container":"","createdAt":"2023-11-09T21:17:11.054Z","position2":{"col":5,"row":4.4,"width":3,"height":1,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2023-11-09T21:17:45.351Z"},"update":{"events":[{"type":"widget","event":"click","method":"setValue","params":{"value":"[ \"Mushrooms\", \"Other\" ]"},"waitMs":"0","pluginId":"cascader1","waitType":"debounce"}]},"widgetId":"button1","shouldRecalculateTemplate":true},"isUserTriggered":true}],"gitSha":null,"checksum":null,"createdAt":"2023-11-09T21:17:49.393Z","updatedAt":"2023-11-09T21:17:49.393Z","pageId":6,"userId":1,"branchId":null,"page":{"name":"Cascader test"}},"modules":{}}
