Forge Component
(83)
Published on 21 May (10 days ago) by OutSystems R&D
83 votes
Published on 21 May (10 days ago) by OutSystems R&D

Hi all, 

I am using the Dropdown tags interaction in a reactive web app. 

I would like to know how to disable the searching functionality and just have it function as a normal dropdown list, with the selected item becoming a tag. 

I am aware that this interaction is built on the jsjohnson choices plugin (https://github.com/jshjohnson/Choices). According to that helpfile, there is a SearchEnabled: true/false function. The description of this function indicates that this is exactly what I need. 

But when I implement this in the AdvancedFormat field (see screenshot),  the search area still shows.


In the Note it mentiones that multiple select boxes will always show search areas, but I believe I am using a single select option by setting the maxItemCount to 1.

Any assistance would be appreciated. 



Solution

Hi, 

Well I don't know how to fix with the AdvancedFormat, but you have other solution, you can apply CSS to hide the Search element, like this:

.choices[data-type*="select-multiple"] .search--wrapper {

        display: none;

}

Solution

Hi Larissa le Roux,


The choices.js library has indeed that option, however as you can see on the picture from the documentation, it only affects the select-one mode (that corresponds to the DropdownSearch). The DropdownTags is a multiple select.


The solution provided above is probably the best way to go.


Best regards,

Bernardo Cardoso

Vera Mendonça wrote:

Hi, 

Well I don't know how to fix with the AdvancedFormat, but you have other solution, you can apply CSS to hide the Search element, like this:

.choices[data-type*="select-multiple"] .search--wrapper {

        display: none;

}

Thanks Vera! Where would I implement this? I tried puttiing that in the ExtendedClass of the interaction, but I think I might be doing something wrong, as it is still not working. 

Larissa le Roux wrote:

Vera Mendonça wrote:

Hi, 

Well I don't know how to fix with the AdvancedFormat, but you have other solution, you can apply CSS to hide the Search element, like this:

.choices[data-type*="select-multiple"] .search--wrapper {

        display: none;

}

Thanks Vera! Where would I implement this? I tried puttiing that in the ExtendedClass of the interaction, but I think I might be doing something wrong, as it is still not working. 

You have to include that CSS code on the style sheet of the application, not in the widget. You can insert it in the Theme Style Sheet or in the style sheet of the screen, like one of this 2 ways:


Vera Mendonça wrote:

Larissa le Roux wrote:

Vera Mendonça wrote:

Hi, 

Well I don't know how to fix with the AdvancedFormat, but you have other solution, you can apply CSS to hide the Search element, like this:

.choices[data-type*="select-multiple"] .search--wrapper {

        display: none;

}

Thanks Vera! Where would I implement this? I tried puttiing that in the ExtendedClass of the interaction, but I think I might be doing something wrong, as it is still not working. 

You have to include that CSS code on the style sheet of the application, not in the widget. You can insert it in the Theme Style Sheet or in the style sheet of the screen, like one of this 2 ways:



Thanks a lot! This has been very helpful, I truely appreciate it :)