Hi Everyone,
I'm using a drop down search in my application, and in the DropdownSearchInitialized I'm using the following logic
Check this post
It was working perfectly before, but after updating the OutSystemsUI (Version 2.14.0) , it's not working anymore. Showing this error every time i open my application.
From my understanding, The querySelector in the code not returning the actual div and variable storing null value.
var searchInput = document.getElementById($parameters.DropdownWidgetId).querySelector('.vscomp-search-input');
How can i solve this issue ?
Thanks In Advance,
Dexter
At the moment you are trying to do this the element is not in the DOM. You should add timeout on your JS.
Hi Paulo,
Thank you for your reply. I'm not sure that you've interpret that I'm using this in OnInitialize of the screen,
I'm actually using this Js in the DropdownSearchInitialized action. As i said, It was working in the old version of OutSytemsUI. Consider checking the link mentioned above.
Kind regards,
Hi Dexter you can try to call the javascript in the OnReady Event. I think what happen is during the DropdownSeachInitialized the DOM Element is not yet ready
Share the oml if you want/can
Sure, please find the attachments.
Hi @Dexter Morgan ,
please examine the DOM in chrome tools.
the search input is not a child of the widget. Maybe it was in earlier versions of Outsystems UI.
You'll have to find another way of getting at it , i noticed they share a name (blue) but I don't know if that is dependable.
Dorine
Hi Dexter,
In addition to the previous comments, refer to the below mentioned highlighted (in color) code changes that you need to make in the existing code.
JS snippet:
const dropdownProvider = OutSystems.OSUI.Patterns.DropdownAPI.GetDropdownById($parameters.DropdownWidgetId).provider; const searchInput = dropdownProvider.$searchInput; searchInput.addEventListener('input', function () { setTimeout(function() { if (dropdownProvider.$ele.querySelector('.has-no-search-results')) { $actions.OnSearchResultChange(true); } else { $actions.OnSearchResultChange(false); } }, 300); }); document.querySelector('.vscomp-search-clear').addEventListener('click', function () { $actions.OnSearchResultChange(false); });
See this demo screen: DropdownTagsTask
PS: Make sure that you render the DropdownTags element after the DataSource (Referenced as the DropdownTags OptionList) fetch is finished.
I hope this helps you!
Benjith Sam
Hello @Dexter Morgan
The dropdown's balloon is detached from the dropdown itself in order to solve all issues related to nested components, ie, components inside other components and this is a best practice used by all the libraries like the one we use.What is exactly the use case you're trying to achieve?
Cheers,GM