Introduction
I am using a 'Tabs' Navigation component, named tabs1 for this example. My reasoning for using this component is to create the illusion of having different 'tabs' by showing/hiding elements based on the tabs1.selectedIndex. Let's define the number of pages as n, my reasoning for using this component is to avoid the usage of a Tabbed Containe that has an n number of the same table and an n number of duplicated components on each page. If each page has the same table and components, there is no need to duplicate the components and thereby the logic related to each component.
I thought of this 'clever' way to set the visibility of components using an array of booleans and accessing the array using the tabs1.selectedIndex. Let's define the given visibility array as [true, false, true], we can then use the tabs1.selectedIndex as the accessor to get the proper value of the tab we're on, like so: [true, false, true][tabs1.selectedIndex]. Putting this into the 'Hidden' attribute of a component as JavaScript would allow for the component to be shown/hidden pretty dynamically based on the tabs.selectedIndex value. But this is where the problem arises.
The Problem
Using this syntax throws an error for some reason in Retool. See the screenshot below for an example of that error. The error is an Unrecoverable syntax error (x% scanned), with x being an integer. The error appears at the FIRST closing square bracket, ], in the JavaScript code. From the example given, [true, false, true], it is the absolute last character of that passage that the error appears on. The integer, x in the error varies. In my testing, it has been 2%, 5%, and 12%.
The Questions
Although this technical does 'work' without any visible issues, I am wary of using this 'clever' trick due to that error, and instantiates a plethora of questions:
- What unintended consequences could this error have on an application?
- Could this lead to something showing as visible when it should be hidden?
- Is there some way to prevent this error from occurring?
- Why is the error there?
- Is it a problem with Retool reacting to what 'appears' to be a 2D array?
If anyone has any insight into this error or could please provide a fix for this somehow, that would be greatly appreciated as it's a lot better than attempting to hide/show visibility based on .selectedLabel, which can get rather lengthy based on the number of 'tabs'.
Duplication
I have recreated the issue in a sandbox application to replicate, display, and share the issue. See the attached file for the project I created that duplicates this issue. It can just as easily be replicated in any application by using the syntax explained above.
For further reference, I am on Self-Hosted Retool version 3.28.3. If you import the project and look at any of the components that have a variable visibility, you will see the error. The screenshot provided above was taken from the demo application and is of the image1 component. If you have any questions, please let me know, and I'll try to clarify.
Syntax Issue.json (10.4 KB)
