title: ember-power-select Custom Search Action and 'selected' with external data
body: <p><strong>Overview</strong></p>
  
  <p>I'm using <a href="https://ember-power-select.com/docs/custom-search-action" rel="nofollow noreferrer">ember-power-select</a> in a Ember.js 3.8 project - and it half works and half doesn't !</p>
  
  <p>To make the question more readable I've put all the code at the bottom of the question. </p>
  
  <p><strong>Situation</strong></p>
  
  <p>The select is configured to fetch data from an API endpoint and provide the user with a set of possible options to select from.</p>
  
  <p>The route (routes/guest/new-using-ember-power-select.js) involved does a <code>createRecord</code> of the model (models/guest.js) and then, ideally, changes made to both of the form elements (templates/guests/new-using-ember-power-select.js and templates/components/guest-form-ember-power-select.hbs) are reflected back into that record in the data store.</p>
  
  <p><strong>Issue</strong> </p>
  
  <p>This works fine for the text input but I can't make it work for the ember-power-select.</p>
  
  <p>In the current configuration (shown below) the user may : </p>
  
  <ul>
  <li>search for options to select; </li>
  <li>select an option and; </li>
  <li>have that selection reflected back into the <code>guest</code> instance in the data store. <em>However the choice made is not reflected in the user interface - there appears to have been no selection made</em>.</li>
  </ul>
  
  <p>I would really appreciate someone pointing out what I'm doing wrong here. I feel like it might be quite a small thing but it did occur to me that I have to manage the state of the select via properties in the component and only when the form is submitted update the underlying data-store .... I would prefer not to do that but I would be interested to know if that was thought to be the best idea.</p>
  
  <p>Thanks</p>
  
  <hr>
  
  <p><strong>EDIT 1:</strong> I forgot to say that I have attempted to alter the <code>onchange</code> property of the ember-power-select so that instead of looking like this </p>
  
  <pre><code>onchange=(action "nationalityChangeAction")
  </code></pre>
  
  <p>... it looks like this ... </p>
  
  <pre><code>onchange=(action (mut item.nationality))
  </code></pre>
  
  <p>That has the effect that :</p>
  
  <ul>
  <li>the value selected is visible in the form (as you would normally expect but unlike my current effort) but</li>
  <li>the value placed into the underlying data store record is not a two character country code but instead an instance of the array returned the API call, an object with two properties <code>{"name":"New Zealand","alpha2Code":"NZ"}</code>.</li>
  </ul>
  
  <hr>
  
  <p><strong>Model</strong></p>
  
  <pre><code>//app/models/guest.js
  import DS from 'ember-data';
  import { validator, buildValidations } from 'ember-cp-validations';
  
  const Validations = buildValidations({
    name: [
      validator('presence', true),
    ],
    nationality: [
      validator('presence', true),
    ],
  });
  
  
  
  export default DS.Model.extend( Validations, {
    name: DS.attr('string'),
    nationality: DS.attr('string')
  });
  </code></pre>
  
  <p><strong>Route</strong></p>
  
  <pre><code>//app/routes/guest/new-using-ember-power-select.js
  import Route from '@ember/routing/route';
  
  export default Route.extend({
    model() {
      return this.store.createRecord('guest', {
        name: "",
        nationality: ""
      });
    },
    actions: {
      updateNationality(slctnValue) {
        this.controller.model.set('nationality' , slctnValue);
      },
    }
  });
  </code></pre>
  
  <p><strong>Template</strong></p>
  
  <pre><code>//app/templates/guests/new-using-ember-power-select.js
  &lt;h2&gt;Guest: Add New&lt;/h2&gt;
  &lt;div class="well well-sm"&gt;
    Demonstration of 'ember-power-select'
  &lt;/div&gt;
  {{guest-form-ember-power-select
    item=model
    changeNationalityHandler="updateNationality"
    updateRecordHandler="updateRecord"
    cancelHandler="cancelAndExit"
  }}
  {{outlet}}
  </code></pre>
  
  <p><strong>Component Template</strong></p>
  
  <pre><code>//app/templates/components/guest-form-ember-power-select.hbs
  &lt;div class="form-vertical"&gt;
    {{!-- Guest Name --}}
    &lt;div class="form-group"&gt;
      &lt;label class="control-label"&gt;Name&lt;/label&gt;
      &lt;div class=""&gt;
        {{  input type="text"
            value=item.name
            class="form-control"
            placeholder="The name of the Guest"
            focus-out=(action (mut this.errMsgDspCntrl.nameError) true)
        }}
      &lt;/div&gt;
      {{#if this.errMsgDspCntrl.nameError}}
        &lt;div class="text-danger"&gt;
          {{v-get item 'name' 'message'}}
        &lt;/div&gt;
      {{/if}}
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="control-label"&gt;Countries (using power-select)&lt;/label&gt;
      &lt;div class=""&gt;
        {{#power-select
          searchPlaceholder="Text to provide user info about what they can search on"
          search=(action "searchCountries")
          selected=item.nationality
          onchange=(action (mut item.nationality))
          as |countries|
        }}
          {{countries.name}}
        {{/power-select}}
      &lt;/div&gt;
      {{#if this.errMsgDspCntrl.nationalityError}}
        &lt;div class="text-danger"&gt;
          {{v-get item 'nationality' 'message'}}
        &lt;/div&gt;
      {{/if}}
    &lt;/div&gt;
    {{!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--}}
    {{!-- Buttons --}}
    &lt;div class="form-group"&gt;
      &lt;div class=""&gt;
        &lt;button type="submit" class="btn btn-default" {{action "buttonSaveClicked" item}}&gt;{{buttonLabel}}&lt;/button&gt;
        &lt;button type="button" class="btn btn-default" {{action "buttonCancelClicked" item}} &gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  {{yield}}
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>//app/components/guest-form-ember-power-select.js
  import Component from '@ember/component';
  
  export default Component.extend({
      actions:{
          searchCountries(term) {
            //Response to :
            //
            //https://restcountries.eu/rest/v2/name/z?fields=name;alpha2Code
            //
            //
            //looks like this
            //  [
            //    ...
            //    {"name":"New Zealand","alpha2Code":"NZ"}
            //    ...
            //  ]
            //
  
            let url = `https://restcountries.eu/rest/v2/name/${term}?fields=name;alpha2Code`
            let dbg = fetch(url)
              .then(function(response) {
                return response.json();
              });
            return dbg;
          },
          nationalityChangeAction(slctn){
              this.sendAction('changeNationalityHandler', slctn.alpha2Code);
          },
      }
  });
  </code></pre>