[OutSystems UI] Dropdown Tag
Forge component by OutSystems R&D
Application Type
Reactive

hi,

I've been researching the dropdown tags and haven't found what I was looking for. My question is, is it possible that the moment I search and then select the tag, the search I entered will not erase?

Thanks
Solution

Hi @Filipe Sousa,

Check out the attached demo. The previous demo was working per your requirements only when you select a choice using keyboard keys (i.e. using arrow keys and Enter key to select). When you selected a choice using the mouse click, the dropdown was indeed getting reset and I had missed that. Good call out!

I have updated the 'ReactiveDemo.js' file so you can copy it over.

Regards

AJ

DemoDropdownTagKeepSearchTextv3.oml

So, the dropdown tags is very cool to use!

The search will not erase! Just if you click on the cross to erase that tag.

Is that the answer you are looking for?

Regards,

Márcio C.

Hi Marcio,

what I want is not to delete the search when I select the tag.

Regards,

Filipe Sousa

Hi Filipe Sousa,

Please mark property "IsRemoveItems" to false.

https://vani-mankad.outsystemscloud.com/DropdownTagsDemo/DropdownTagsDemo

Thanks,

Vani


Nice!! :)

Regards

Márcio C.

The OP (original poster) is requesting that the Search text is not removed after a value is selected. The tags are not what he is referring to. So 'IsRemoveItems' does not solve it. For e.g. he is requesting that 'col' not be removed after a value is selected:

Regards

AJ


Exactly @=AJ= , that's my problem. Is there any way to solve it?

I see. Thanks for clarification. Looks tricky but let´s try it out.

Thanks,

Vani

Yes @Filipe Sousa, there is at least one way I know of, using javascript in the DropdownTag's - 'OnChange' event. Please see my post further below for the details. Hope it helps,

Regards,

AJ

Hello @Filipe Sousa,

You can get it done in the following way.

In the OnChange client action for your dropdowntag control, just add a JavaScript widget with the following code:

var controlId = document.getElementsByClassName('choices__input--cloned')[0];

controlId.setAttribute('placeholder', controlId.value);

Screenshot of how you can put it all together:


Here's the result you expect:

I am curious though as to why you prefer to retain the searched text after a value has been selected,

Happy coding

AJ

I entered this code, but it gave me the following error...
Capture.PNG

Please right click on the 'Search' and choose 'Inspect' In the highlighted area and if possible provide the screenshot (similar to the following)

Thanks

AJ

this appears to me. 
I have to add the class name in the javascript?


Ok great, so the class name is the same as the one I used. Was just confirming. Now let's check your code. Please paste your javascript here. If you had copy pasted the code then I do not expect the error. Is it possible you typed the code yourself? Lets check. For e.g. 'choices___input' has 3 underscore characters etc.

Somehow empty spaces have ended up in your code. So it's an easy fix. Please remove those 3 spaces and you should be good!


Not yet. I removed the spaces, but still it erases me

I debugged and it appears


Hello @Filipe Sousa ,

Attached is the oml of the code that works. Please note you will need to add the OutSystemsSampleDataDB module's Sample_Employee table as a dependency to run the demo. 

1. Let's see if the oml functions as you expect it to.

2. If the attached oml works as expected then let's see if by comparing the logic and settings/ properties etc you can catch the issue on your end.

Regards,

AJ

DemoDropdowntagsKeepSearchText.oml

Thanks for sharing. I've been using your example and testing (although I still can't find what's wrong with mine) and I came to the conclusion that after selecting the tag that I searched for it was showing correctly, however, it restarts the search part ... 
What I wanted was for him to keep the research data. Do you understand?

I just updated my previous oml (because I wanted it to be 'correct'). The difference is that now I populate the dropdowntags widget after the data fetch is complete. Not that any of this changes things for you. So feel free to download the latest attachment.

Did the attached oml work as you expected it to? You did not specifically confirm it previously. If the issue continues to be only in your code, I believe you may have CSS settings on your screen/ module that may be impacting the dropdowntags behavior.

Is there any part of your code or oml that you can share? That would help with the troubleshooting.

Regards,

AJ

I created another application to test and it worked ... However the one I want is not working... I am not able to find the differences ... Could it have to do with the Theme?
what I have:





But what I really wanted was that I kept the list of what I searched for and not that it returns to normal.


The purpose is for me to search for example "c" and return the list with the letter "c" and I can for example select more than one without having to type "c" again ...

Regards,

Filipe Sousa

Yes definitely its the theme or local css at play but, that said, I now see that not only do you need the text to stay, you needed the search text to be editable and the focus to remain at the end of the search text so you can continue to type further if you chose to. Back to the drawing board then :)


but how do I manage to keep the search and the list searched?

Regards,

Hello @Filipe Sousa,

Please try out the attached oml. If this is your requested behavior, then here is the breakdown of the proposed fix/hack/solution:

1. By design, the input search text gets cleared in the OutSystemsUI's -> Choices.js code.


2. So to avoid this default behavior of clearing the Input tag's search text, I created a copy of Choices.js -> renamed it as ReactiveDemo.js -> commented out the key, value settings for 'clear' -> added the custom script to the screen's 'Required Scripts' section:

Note: Choices.js is also used by the DropdownSearch widget and your custom script will likely be used by it if you use that widget in the screen. Creating a copy of the Choices.js locally comes with its obvious consequences long term (for e.g. if the OutSystemsUI's Choice.js is updated at some point).

Hope this works out for you,

Regards

AJ

DemoDropdowntagsDoNotClearSearchText.oml

Thanks a lot!!

I will try! I cant open your oml... Error in format.

I am able to download it and open it without issues on my end. Interesting!

I created a new oml from scratch just in case. Please try this one and see how it goes

DemoDropdownTagKeepSearchText.oml


One detail, is it possible that the search list is also open?

Sure, so currently if you use keyboard to select an item, the dropdown stays open, but if you mouse click to select, then the dropdown closes. Is this when you would like it to stay open?

In that case, when should the search list close? For e.g. should it close when you click anywhere outside the dropdowntags widget?

Yes, after doing the search on the input and the list appears to me ... when I click on item, I want the list to remain open with the remaining data. And yes when clicking on any place outside the input it will close

Hey Filipe, so I had commented out more code than was necessary previously. So that impacted the default behavior of keeping the display open when a value is selected by mouse click. I have now commented out just the following code in the screen's required script file and all is well again.Check out the above change in the screen's required JS script in the attached demo.

Happy coding,

AJ

DemoDropdownTagKeepSearchTextv2.oml


okay, but now after selecting the list it resets the searched value

Hi @=AJ= ,

In your last demo, is it possible that after selecting the option the list does not do the reset and keep what was searched for previously?

Solution

Hi @Filipe Sousa,

Check out the attached demo. The previous demo was working per your requirements only when you select a choice using keyboard keys (i.e. using arrow keys and Enter key to select). When you selected a choice using the mouse click, the dropdown was indeed getting reset and I had missed that. Good call out!

I have updated the 'ReactiveDemo.js' file so you can copy it over.

Regards

AJ

DemoDropdownTagKeepSearchTextv3.oml

Thanks a Lot @=AJ= !!! This work well! Is perfect!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.