Cannot read property 'offsetTop' of null

Using Ember 2.7 and ember-power-select 1.0.0-beta.12, I have two basic selects set up like this:

{{#power-select
  selected=vendor.country
  options=countries
  searchField='name'
  onchange=(action 'chooseCountry' vendor)
  as |country|
}}
  {{country.name}}
{{/power-select}}

{{#power-select
  selected=vendor.state
  options=states
  searchField='name'
  onchange=(action (mut vendor.state))
  as |state|
}}
  {{state.name}}
{{/power-select}}

I’ll click on one, the options list opens, then, without closing it, I’ll click on the other select, get the mentioned error in console while the other options list opens, and I’ll get a Cannot read property 'offsetTop' of null error in console. After this, I can’t close the second options list no matter what I try and basically both selects are unusable (also unable to select items).

I tried to set up a demo of this on ember-twiddle, but I’m not sure it supports addons quite yet.

[michalsnik]

I think know exactly what causes issue now: When one of the dropdown has selected element which index is bigger than number of items in other select component, when you open the “smaller” select and without closing it try to open the one that has already selected element with bigger index - it crashes.

It looks like the function scrollTo is looking for an element on opened list with index that is already selected on other select component. At least it looks like so.

I’m trying to find a proper solution now.

Update:

optionsList = self.document.querySelectorAll('.ember-power-select-options')

This returns a wrong list - the one that was not closed and not the new one. Clearly there is no item with index that was selected on the second select so it throws an error, as there is no offsetTop on undefined. I think that opened list should be closed before executing scrollTo() on another - then everything would be all right. What do you think?

[cibernox]

Ok, time to check this