Using @onChange={{this.chooseDestination}} fails

[belgoros]

trafficstars

I'm using the following versions of Ember and ember-power:

ember: 3.12.0
ember-data: 3.12.0
ember-power-select: 3.0.3

When following the docs on action handling and using the power select in a template as follows:

# templates/components/post_form.hbs

<PowerSelect @selected={{destination}} @options={{cities}} @onChange={{this.chooseDestination}} as |name|>
  {{name}}
</PowerSelect>

and the post-form.js component defined as follows:

import Component from '@ember/component';
import EmberObject from '@ember/object';

export default Component.extend({
  tagName: '',
  cities:['Barcelona', 'London', 'New York', 'Porto'],
  destination: 'London',

  init() {
    this._super(...arguments);
    this.tags = this._dummyTags();
    this._setSelectedTags();
  },

  actions: {
    chooseDestination(city) {
      this.set('destination', city);
    },
...

it fails with:

Uncaught Error: Assertion Failed: <PowerSelect> requires an `@onChange` function
    at Object.assert (index.js:163)
    at PowerSelect.init (power-select.js:193)
    at initialize (core_object.js:89)
    at Function.create (core_object.js:692)
    at FactoryManager.create (container.js:549)
    at CurlyComponentManager.create (glimmer.js:5461)
    at Object.evaluate (runtime.js:1494)
    at AppendOpcodes.evaluate (runtime.js:70)
    at LowLevelVM.evaluateSyscall (runtime.js:3283)
    at LowLevelVM.evaluateInner (runtime.js:3229)

If I change @onChange to use the syntax as follows:

@onChange={{action "chooseDestination"}}

it works. Is it an error of the docs or I'm missing smth ? More of that, the provided syntax fails in a component/controller:

cities = ['Barcelona', 'London', 'New York', 'Porto']
destination = 'London'

I had to use:

cities: ['Barcelona', 'London', 'New York', 'Porto'],
destination: 'London',

actions: {
...

Note: see the use of commas after each declared variable.

[cibernox]

That's expected. The syntax I've used, which is the preferred one for Octane, does not put actions inside the actions property. Instead it references actions that are in the root of the object.

The equivalent in classic syntax is:

import Component from '@ember/component';
import EmberObject from '@ember/object';

export default Component.extend({
  tagName: '',
  cities:['Barcelona', 'London', 'New York', 'Porto'],
  destination: 'London',

  init() {
    this._super(...arguments);
    this.tags = this._dummyTags();
    this._setSelectedTags();
    this.chooseDestination = this.chooseDestination.bind(this)
  },

  chooseDestination(city) {
    this.set('destination', city);
  },
...

Your approach is also perfectly fine

[belgoros]

@cibernox Thank you for your response. I didn't find any mentions about that neither in the Overview section nor in the changelog file. I also discovered some incoherencies in provided examples in the docs pages, e.g. data in the controller does not correspond the one used in the template. For example, in search section, there are names array declared in the controller, but the template uses diacritics as options.