Ember: set attribute's value with action passed from a <select> element

Question

I'm trying to figure out how to set a new Ember Data Record's attribute's value based on choices in a select element, using the {{action}} helper. Here's my situation, simplified:

item.js route. Creates a new record that is available in the template.

model() {
  return this.store.createRecord('item');
}

new-item.hbs template. The select-element triggers the action to set the new item's color attribute.

<select {{action 'setColor' model value="target.value" on="change"}}>
  <option value="">choose</option>
  <option value="white">white</option>
  <option value="blue">blue</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
</select>

item.js controller.

actions: {
  setColor(item, option) {
    console.log(option);
    record.set('color', option);
    console.log(item);
  }
}

Console.log(option) returns nothing. The record.set works fine, I can hardcode the option and the console.log(item) will show that the new item object has the color attribute set.

On the other hand, if I do the action call with just

onChange={{action 'setColor' value="target.value"}} 

the color gets logged correctly from the action. But if I add "model" into that action call as before with the {{action ... on="change"}} syntax, console.log(option) returns undefined and console.log(item) returns an Event with no model object attached.

Question is: How do I pass both the target.value and the model to the setColor action?

Answer 1

setColor function will receive event attribute as last argument by default.

onChange={{action 'setColor' value="target.value"}} 

so value attribute will be retrieved from event. so this will work as expected. but

onChange={{action 'setColor' model value="target.value"}}

value attribute will try to get target.value from model property as we sent model as first argument, and default event argument will be passed as second argument. so combining won't work.

Solution would be

onChange={{action 'setColor' model}}

and inside actions,

actions: {
  setColor(model, event) {
    let value = event.target.value;
  }
}