Angular 2 Dropdown elements doesnt get selected

[Lagencie]

This is the Dropdown Element where I can select different Timezones 

This is the actual Dropdown Field, that opens, when clicking on the Element above

Now the problem is - this list is implemented with IDs so Europe has the id: TESTID_Europe and so on ... 

I mapped the Object with Select_Timezone and a project variable with default TESTID_Europe and I just change it before I select something to TESTID_Africa for example

It perfectly selects Europe / Etc / Australia / Atlantic / Indian / Pacific in the given example - but it wouldnt select Africa for example, because the element has to be right on screen ... which is a little annoying because I wouldnt be able to select Africa in this case right now.

Africa is found in the list on the Top and therefore it doesnt click the item as long as I dont scroll up.

Which wouldnt be a problem if I always know wether to scroll up or down to the item I need - but we have cases where there are 100+ Elements in this dropdown Box ... like Timezone 2 within Europe, there are hundreds of Towns that can be selected

Anyone had this problem before using angular 2 or knows how to make this work?

[baxatob]

Hi,

I don't have exact the same problem, however we have the similar dropdown element with currencies. To avoid scrolling we are using workaround procedure, which fires javascript function, to set required value to the dropdown.

More about how to execute javascript on the web pages - https://support.smartbear.com/testcomplete/docs/app-testing/web/general/common-tasks/javascript.html

[tristaanogre · Accepted solution]

Since you have the Africa choice mapped, before you attempt the click, call TESTID_Africa.scrollIntoView(true).  This will bring the desired object into view.  You can then execute your click.

[Lagencie]

nice, works with scrollintoview(ifneeded)- thanks