diff --git a/addon/components/select-light.hbs b/addon/components/select-light.hbs
index ac2857b..59a3a15 100644
--- a/addon/components/select-light.hbs
+++ b/addon/components/select-light.hbs
@@ -1,5 +1,5 @@
 <select
-  {{on "change" this.change}}
+  {{on "change" this.onChange}}
   ...attributes>
   {{#if @placeholder}}
     <option value="" selected disabled>
diff --git a/addon/components/select-light.js b/addon/components/select-light.js
index 0dbc609..e833566 100644
--- a/addon/components/select-light.js
+++ b/addon/components/select-light.js
@@ -1,16 +1,15 @@
 import Component from '@glimmer/component';
-import { isNone } from '@ember/utils';
+import { isNone, isPresent } from '@ember/utils';
+import { action } from '@ember/object';
 import { deprecate } from '@ember/debug';
 
-const noop = () => {};
-
 export default class extends Component {
   constructor() {
     super(...arguments);
 
     this.valueKey = this.args.valueKey ?? 'value';
     this.displayKey = this.args.displayKey ?? 'label';
-    this.change = this.args.onChange ?? this.args.change ?? noop;
+    this.change = this.args.onChange ?? this.args.change;
 
     deprecate(`Triggering @change on <SelectLight /> 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',
@@ -28,4 +27,18 @@ export default class extends Component {
       this.args.options?.[0][this.displayKey],
     ].some(isNone);
   }
+
+  @action
+  onChange(event) {
+    if (isPresent(this.change)) {
+      const { args: { options, valueKey }, change, hasDetailedOptions } = this
+      let selectedOptions = [...event.target.selectedOptions].map(function(option) {
+        return hasDetailedOptions ? options.findBy(valueKey, option.value) : option.value
+      })
+      if (!event.target.multiple) {
+        selectedOptions = selectedOptions[0]
+      }
+      change(selectedOptions, event)
+    }
+  }
 }