Open dropdown items by clicking another button/link
Question
Application Type
Reactive

Hi,

I am trying to open a dropdown (show the items) by clicking another container. I have a status that is shown in a container with some formatting (colour) and when the user clicks it, a dropdown should appear with all the statuses that can be chosen. Since it is more user friendly to open the dropdown right away I am looking for a way to do this. 

Already tried some JS
document.getElementById($parameters.DropdownId).classList.toggle("show");

OR


document.getElementById($parameters.DropdownId).click();

but both give the same error. 

Can somebody help out?


Max

mvp_badge
MVP

Hello Max,

Can you share .oml please so we can identify what the problem might be?

Regards.

Hi Max :)

Are you doing the show of the dropdown and the click synchronously or in the same action?

My 2cents is to run the JS that does the click asynchronously like below and see if that solves it:

document.getElementById($parameters.DropdownId).click();
$resolve();

Or better yet improve it to check if the element is already in the screen when only do the click at that time.

Regards,
Rúben

Hi Ruben,

My logic is currently doing this: 

The assign set the value of ShowChangeStatus to true making the dropdown visible and hiding the colored container.

JavaScript does this: 


The problem is that you are trying to click or add a class to a element that is not yet in the screen.

If you do something like in the image below it will solve that error you are having because the JS running asynchronously. You can read more here.
But this will not expand the dropdown, from my quick search online, see here, it appears expanding a dropdown (select) is not that simple... anyway you can try some of the solutions in that link ;) 

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