diff --git a/CHANGELOG.md b/CHANGELOG.md
index 80d30b7..56a4942 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
# ember-select-light Changelog
+### v3.0.0 (January 20, 2021)
+- [#30](https://github.com/ember-a11y/ember-select-light/pull/43) [BREAKING] Change event now has value as first param, followed by the full event (thanks rtablada & pzuraq!)
+
### v2.0.4 (December 3, 2020)
- [#26](https://github.com/ember-a11y/ember-select-light/pull/26) [BUGFIX] Fixes use case where passed in options objects have an empty string as the value or label (thanks javve!)
diff --git a/README.md b/README.md
index d558742..6eab7f4 100644
--- a/README.md
+++ b/README.md
@@ -21,6 +21,29 @@ ember install ember-select-light
@onChange={{this.handleChange}} />
```
+`handleChange` should expect the first parameter to be the chosen value(s), the second is the full event, then you can handle it however you wish
+
+#### With [ember-set-helper](https://github.com/pzuraq/ember-set-helper)
+
+A quick and easy to implement option with minimal boilerplate.
+
+```js
+class MyComponent extends Component {
+ @tracked selected = "turtle";
+
+ handleChange = (value, event) => {
+ this.selected = value;
+ };
+}
+```
+
+```handlebars
+
+```
+
#### With an array of objects...
```handlebars
diff --git a/addon/components/select-light.js b/addon/components/select-light.js
index 0dbc609..9516c2b 100644
--- a/addon/components/select-light.js
+++ b/addon/components/select-light.js
@@ -7,10 +7,12 @@ const noop = () => {};
export default class extends Component {
constructor() {
super(...arguments);
+ const changeCallback = this.args.onChange ?? this.args.change ?? noop;
this.valueKey = this.args.valueKey ?? 'value';
this.displayKey = this.args.displayKey ?? 'label';
- this.change = this.args.onChange ?? this.args.change ?? noop;
+
+ this.change = (ev) => changeCallback(ev.target.value, ev);
deprecate(`Triggering @change on is deprecated in favor of @onChange due to ember-template-lint's no-passed-in-event-handlers rule`, !this.args.change, {
id: 'ember-select-light.no-passed-in-event-handlers',
diff --git a/tests/integration/components/select-light-test.js b/tests/integration/components/select-light-test.js
index 5e38539..7ecf739 100644
--- a/tests/integration/components/select-light-test.js
+++ b/tests/integration/components/select-light-test.js
@@ -187,7 +187,7 @@ module('Integration | Component | select-light', function(hooks) {
this.set('myValue', null);
await render(hbs`
-
+
`);
@@ -203,7 +203,7 @@ module('Integration | Component | select-light', function(hooks) {
this.set('myValue', null);
await render(hbs`
-
+
`);
@@ -227,7 +227,7 @@ module('Integration | Component | select-light', function(hooks) {
+ @onChange={{action (mut this.myValue)}} />
`);
await fillIn('select', options[0]);
@@ -242,7 +242,7 @@ module('Integration | Component | select-light', function(hooks) {
this.setProperties({
options,
value: options[1],
- customAction: ({ target: { value } }) => {
+ customAction: (value) => {
assert.step('handled action');
assert.equal(value, options[0]);
},