Character Limit on Search Term on Dropdown Select Button Component?

[Arshad_Irshad]

Hey! I've created a select dropdown button, when I click on the button and select an option with a small text length from the dropdown menu. At that point, the data displayed on the table component is expected. Please see the screenshot below for reference.

But, The issue arises when i select an option with a large text length from the dropdown menu. At that point, the data displayed on the table component is not as expected. It's not working properly see the screenshot below for reference.

Do we know any character limit on the search term of these Dropdown Selects?

I created a select dropdown button using these steps.

1. First, I chose a select component from all the components and dragged it onto the canvas.
2. Now, I selected mapped mode and chose a data source. Then, I selected 'value' and 'label' in the mapped options.

3. After doing this, I clicked on the advanced settings icon located on the right side of the interaction and selected 'case sensitive' in the search options dropdown.

Now, I chose a table component from all the components and dragged it onto the canvas. After selecting the data source, I connected the select dropdown button to the table component by clicking on 'search term' and entering '{{ select4.value }}' (where 'select4' is the name of our select dropdown button). Then, I selected 'case sensitive' in the search dropdown and enabled case-sensitive filtering in the advanced settings. Please see the screenshot below for reference.

[Paulo]

Hi @Arshad_Irshad, welcome to the forum!

From looking at this behavior, we may need to build our own custom JS Query to make the search work for your use case.

The filtering would look something like this:

Note: Where query1 is your select all query, and select1 is your Select component. The triple "=" will guarantee an exact match.

The Select component would also need an event handler to run the filter when a new selection is made:

Let us know how it goes!

[Arshad_Irshad]

Thank you @Paulo , for your solution! I've attempted to implement your solution by creating a custom JavaScript query to enable the search functionality in my scenario. I've written a query similar to the one you used but I'm encountering an error. Please refer to the screenshot below for details.

but, it still isn't returning the expected output.

[Paulo]

You are welcome!

Could you share a screenshot of the "all_data" query? Maybe we need to enable Transform results and format the result table to an array.

[Arshad_Irshad]

Yeah Sure @Paulo , In my 'all_data' query, I'm displaying all the data from a table. You can refer to the screenshot below for reference.

[Paulo]

The output of this query is a result table, for us to be able to do something like "all_data.data.filter(...)" the output must be an array. Try enabling "Transform results" and use the "formatDataAsArray" function, you can find more details on this by clicking the links from my last post.

[Arshad_Irshad]

I'm trying to implement the new query that you suggested in your last post, but my select component is still not working properly and is not displaying the expected results. Please refer to the screenshot below for reference.

This is another approach I was trying to implement.
But i get this see the screenshot below.

[Paulo]

The "Transform Results" part shouldn't be a JS query, just add it to your SQL query:

Here are the docs for this: https://docs.retool.com/queries/guides/transformers#query-transformers.

On the JS query, implement the filtering:

Make sure to save and run the SQL query after transforming the results. Otherwise, you'll see the same undefined error.
​