Add option to pass @multiple in power-select-with-create (#170)

* Add option to pass `@multiple` in `power-select-with-create`

* Update readme

Author: mkszepp

README.md

@@ -29,7 +29,7 @@ Please also refer to [Ember Power Select documentation](https://github.com/ciber
 </PowerSelectWithCreate>
 ```
 
-If you want to be able to select multiple options, use the `<PowerSelectMultipleWithCreate>` component instead. It has the same API as the normal `<PowerSelectWithCreate>`.
+If you want to be able to select multiple options, use the `<PowerSelectWithCreate>` component with parameter `@multiple={{true}}`.
 
 For more options please refer to the [Ember Power Select docs](http://www.ember-power-select.com/docs).
 

ember-power-select-with-create/package.json

@@ -51,8 +51,8 @@
     "@rollup/plugin-babel": "^6.0.4",
     "babel-plugin-ember-template-compilation": "^2.2.5",
     "concurrently": "^9.1.2",
-    "ember-basic-dropdown": "^8.6.1",
-    "ember-power-select": "^8.7.1",
+    "ember-basic-dropdown": "^8.8.0",
+    "ember-power-select": "^8.12.0",
     "ember-source": "^6.4.0",
     "ember-template-lint": "^7.7.0",
     "eslint": "^9.26.0",
@@ -81,7 +81,7 @@
   },
   "peerDependencies": {
     "@glimmer/component": "^1.1.2 || ^2.0.0",
-    "ember-basic-dropdown": "^8.6.1",
-    "ember-power-select": "^8.7.1"
+    "ember-basic-dropdown": "^8.8.0",
+    "ember-power-select": "^8.12.0"
   }
 }

ember-power-select-with-create/src/components/power-select-with-create.hbs

@@ -1,4 +1,5 @@
 <this.powerSelectComponent
+  @multiple={{@multiple}}
   @afterOptionsComponent={{@afterOptionsComponent}}
   @allowClear={{@allowClear}}
   @ariaDescribedBy={{@ariaDescribedBy}}

ember-power-select-with-create/src/components/power-select-with-create.js

@@ -83,6 +83,20 @@ export default class PowerSelectWithCreateComponent extends Component {
 
   @action
   selectOrCreate(selection, select, e) {
+    if (this.args.multiple) {
+      let suggestion = selection.filter((option) => {
+        return option.__isSuggestion__;
+      })[0];
+
+      if (suggestion) {
+        this.args.onCreate(suggestion.__value__, select);
+      } else {
+        this.args.onChange(selection, select);
+      }
+
+      return;
+    }
+
     if (selection && selection.__isSuggestion__) {
       this.args.onCreate(selection.__value__, select, e);
     } else {

pnpm-lock.yaml

@@ -26,6 +26,20 @@
 <br>
 <br>
 <br>
+<h3>Multiple selections via <code>power-select-with-create</code> &amp; <code>@multiple={{true}}</code></h3>
+<PowerSelectWithCreate
+  @multiple={{true}}
+  @options={{this.countries}}
+  @searchField="name"
+  @selected={{this.selectedCountries}}
+  @onChange={{fn (mut this.selectedCountries)}}
+  @onCreate={{this.createCountry}} as |country|
+>
+  {{country.name}}
+</PowerSelectWithCreate>
+<br>
+<br>
+<br>
 <h3>With custom Add message</h3>
 <PowerSelectWithCreate
   @options={{this.countries}}