align all hooks with power-select

README.md

@@ -24,7 +24,7 @@ An example page can be found [here](https://weddingshoppe.github.io/ember-model-
   modelName='user'
   labelProperty='name'
   selectedModel=selectedModel
-  onChange=(action (mut selectedModel))
+  onchange=(action (mut selectedModel))
 }}
 ```
 
@@ -38,7 +38,7 @@ There is also a withCreate option which can be enabled by passing `withCreate=tr
   onChange=(action (mut selectedModel))
 
   withCreate=true
-  onCreate(action 'createModel')
+  oncreate(action 'createModel')
 }}
 ```
 

addon/components/model-select.js

@@ -137,18 +137,21 @@ export default Component.extend({
   /**
    * Hook called when a model is selected.
    *
-   * @argument onChange
+   * @argument onchange
    * @type Function
    */
-  onChange: fallbackIfUndefined(function(){}),
+  onchange: fallbackIfUndefined(function(){}),
 
   /**
    * Hook called when a model is created.
    *
-   * @argument onCreate
+   * @argument oncreate
    * @type Function
    */
-  onCreate: fallbackIfUndefined(function(){}),
+  oncreate: fallbackIfUndefined(function(){}),
+
+  onopen: fallbackIfUndefined(function(){}),
+  onclose: fallbackIfUndefined(function(){}),
 
   // NOTE: apart from the arguments above, ember-model-select supports the full
   // ember-power-select API which can be found: https://ember-power-select.com/docs/api-reference
@@ -243,20 +246,27 @@ export default Component.extend({
 
   actions: {
     loadDefaultOptions(){
-      if(this.get('loadDefaultOptions')){
+      if(this.get('loadDefaultOptions')) {
         this.get('searchModels').perform(null, null, true);
       }
     },
+    onOpen(){
+      this.send('loadDefaultOptions');
+
+      this.get('onopen')(...arguments);
+    },
     onInput(term){
       if(isEmpty(term)){
         this.send('loadDefaultOptions');
       }
+
+      this.get('oninput', ...arguments);
     },
     change(model){
       if(model.__isSuggestion__){
-        this.get('onCreate')(model.__value__);
+        this.get('oncreate')(model.__value__);
       } else {
-        this.get('onChange')(model);
+        this.get('onchange')(model);
       }
     }
   }

addon/templates/components/model-select.hbs

@@ -30,7 +30,7 @@
   onfocus=onfocus
   oninput=(action "onInput")
   onkeydown=onkeydown
-  onopen=(action "loadDefaultOptions")
+  onopen=(action "onOpen")
   options=_options
   optionsComponent=(component optionsComponent infiniteScroll=infiniteScroll infiniteModel=model withCreate=withCreate)
   placeholder=placeholder

tests/integration/components/model-select-test.js

@@ -55,7 +55,7 @@ module('Integration | Component | model-select', function(hooks) {
     let handleClick = this.spy();
     this.actions = { handleClick };
 
-    await render(hbs`{{model-select modelName='user' labelProperty='name' onChange=(action 'handleClick')}}`);
+    await render(hbs`{{model-select modelName='user' labelProperty='name' onchange=(action 'handleClick')}}`);
     await selectChoose('.ember-model-select', '.ember-power-select-option', 1);
 
     assert.ok(handleClick.calledOnce, 'onChange hook has been called');
@@ -103,13 +103,13 @@ module('Integration | Component | model-select', function(hooks) {
     assert.dom('.ember-power-select-option').hasText(`Add "test"...`);
   });
 
-  test('it fires the onCreate hook when the create option is selected', async function(assert) {
+  test('it fires the oncreate hook when the create option is selected', async function(assert) {
     assert.expect(2);
 
     let handleCreate = this.spy();
     this.actions = { handleCreate };
 
-    await render(hbs`{{model-select modelName='user' labelProperty='name' searchProperty="filter" withCreate=true onCreate=(action 'handleCreate')}}`);
+    await render(hbs`{{model-select modelName='user' labelProperty='name' searchProperty="filter" withCreate=true oncreate=(action 'handleCreate')}}`);
     await selectSearch('.ember-model-select', 'test');
     await selectChoose('.ember-model-select', '.ember-power-select-option', 1);