DropdownSelect hide the DropdownSelect upon selection of data from the list

Hi,

Has anyone know how to hide the DropdownSelect list once you choose a data from the list? Currently it's not closing it immediately whenever you select a data.


Thanks,

Hi Christian,


Which type of app you are using, Traditional,Reactive or Mobie.

Can you provide images what issue you are facing


Regards

Rahul Sahu

Hi Rahul,

I'm using traditional web. I'm using it with a List Box. Whenever I select an item from the list it should automatically close the dropdown.


Hi Christian,

If you are using "Selection Mode=Single" property than you should use size=0 in extended Property.

and for "Selection Mode=Multiple" that is default behave of Listbox.

See Below Image-\

Hope this will help you.

Regards

Rahul Sahu

Hi Rahul,


My problem is the Dropdown Select widget not the Listbox itself. Thanks anyway.


Regards,

Christian

Solution

Hi Christian,

You can achieve the mentioned required DropdownSelect widget behavior by using JavaScript

See the sample application


Steps:

1) Add the below JavaScript function declaration in the Screen JavaScript Section

JS Code Snippet

function removeActiveClass() {    
    var activeclass = document.getElementsByClassName('choices__list choices__list--dropdown is-active');
    activeclass[0].setAttribute('aria-expanded', 'false');
    activeclass[0].classList.remove('is-active');  
}


2) Within the ListBox Widget Extended Properties

call the defined JavaScript function (i.e. removeActiveClass) on every onchange event as shown below.

Hope this helps you!

Let me know if you need .oml file


Regards,

Benjith Sam

Solution

Benjith Sam wrote:

Hi Christian,

You can achieve the mentioned required DropdownSelect widget behavior by using JavaScript

See the sample application


Steps:

1) Add the below JavaScript function declaration in the Screen JavaScript Section

JS Code Snippet

function removeActiveClass() {    
    var activeclass = document.getElementsByClassName('choices__list choices__list--dropdown is-active');
    activeclass[0].setAttribute('aria-expanded', 'false');
    activeclass[0].classList.remove('is-active');  
}


2) Within the ListBox Widget Extended Properties

call the defined JavaScript function (i.e. removeActiveClass) on every onchange event as shown below.

Hope this helps you!

Let me know if you need .oml file


Regards,

Benjith Sam


Hi Benjith,

Thanks for this, it's working just as I wanted. 


Regards,

Christian

You are welcome, Christian :)

Glad I could be of help!


Regards,

Benjith Sam