Ember-power-select not working with 3.20

1

I understand that this is an external module, but I’m still taking a chance here.

Yesterday I updated ember to 3.20 from 3.9.0.

I keep getting this error anywhere where ember-power-select is used.

Error: Assertion Failed: {{power-select}} requires an onchange function

I’ve updated ember-power-select to latest.

Here’s an example of how I am using it

{{#power-select-extend
  triggerClass="ui dropdown search selection no-bottom-margin filter-trigger"
  placeholder=(t "analyses.index.filters.filterByUser")
  selected=user
  allowClear=true
  search=(action "searchUser")
  onchange=(action "filterByUser")
  as |user|
  }}
    {{user.firstName}} {{user.lastName}} ({{user.username}})
{{/power-select-extend}}

This was working perfectly fine before updatig.

Here’s the line from power-select.js that is throwing the error

(true && !(this.get('onchange') && typeof this.get('onchange') === 'function') && Ember.assert('{{power-select}} requires an 'onchange' function', this.get('onchange') && typeof this.get('onchange') === 'function'));

Anyone has an idea?

2

That’s a pretty big jump since Octane landed in the middle there :grin:

I do see this in the ember power select release notes:

  • [BREAKING] All actions starting with on (e.g. onchange and onopen ) are now spelled with camelCase ( @onChange and @onOpen )

So in spite of the error message you could maybe try using onChange instead of onchange? You could also try updating your component to Octane style (angle brackets, action decorator, etc) if that doesn’t work.

EDIT: I see that the notes for the same release (3.0.1 beta) say:

[BREAKING] This component now expects to be invoked with <AngleBracket> syntax.
1 Like
3

Hey thank you very much for the help!

I found what was wrong.

Our app also had ember-power-select-with-create module installed, and this module was using v 2.x.x of ember-power-select.

I’ve forced install ember-power-select-with-create to latest which use v 4.0.0, and now everything works!

Thanks for pointing out the breaking change, it indeed needs to be invoked with the angle bracket style now.

1 Like
4

Ah good catch those plugin/peer dependencies can be tricky. Glad you got it working!

5

I recommend ember-cli-dependency-lint to prevent these kind of issues.

1 Like
6

Thanks for pointing this out I was not aware of this!

Will for sure come in handy.