diff --git a/app/assets/javascripts/discourse/tests/integration/components/select-kit/email-group-user-chooser-test.js b/app/assets/javascripts/discourse/tests/integration/components/select-kit/email-group-user-chooser-test.js
new file mode 100644
index 00000000000..363ac94ac64
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/integration/components/select-kit/email-group-user-chooser-test.js
@@ -0,0 +1,51 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import selectKit from "discourse/tests/helpers/select-kit-helper";
+import { paste, query } from "discourse/tests/helpers/qunit-helpers";
+
+const DEFAULT_CONTENT = [
+ { id: 1, name: "foo" },
+ { id: 2, name: "bar" },
+ { id: 3, name: "baz" },
+];
+
+const setDefaultState = (ctx, options) => {
+ const properties = Object.assign(
+ {
+ content: DEFAULT_CONTENT,
+ value: null,
+ },
+ options || {}
+ );
+ ctx.setProperties(properties);
+};
+
+module(
+ "Integration | Component | select-kit/email-group-user-chooser",
+ function (hooks) {
+ setupRenderingTest(hooks);
+
+ hooks.beforeEach(function () {
+ this.set("subject", selectKit());
+ });
+
+ test("pasting", async function (assert) {
+ setDefaultState(this);
+
+ await render(hbs`
+
+ `);
+
+ await this.subject.expand();
+ await paste(query(".filter-input"), "foo,bar");
+
+ assert.equal(this.subject.header().value(), "foo,bar");
+ });
+ }
+);
diff --git a/app/assets/javascripts/discourse/tests/integration/components/select-kit/multi-select-test.js b/app/assets/javascripts/discourse/tests/integration/components/select-kit/multi-select-test.js
index 53ad6810399..bc627f7d740 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/select-kit/multi-select-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/select-kit/multi-select-test.js
@@ -3,6 +3,7 @@ import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { render } from "@ember/test-helpers";
import { hbs } from "ember-cli-htmlbars";
import selectKit from "discourse/tests/helpers/select-kit-helper";
+import { paste, query } from "discourse/tests/helpers/qunit-helpers";
const DEFAULT_CONTENT = [
{ id: 1, name: "foo" },
@@ -100,4 +101,21 @@ module("Integration | Component | select-kit/multi-select", function (hooks) {
assert.ok(this.subject.isExpanded(), "it doesn’t close the dropdown");
});
+
+ test("pasting", async function (assert) {
+ setDefaultState(this);
+
+ await render(hbs`
+
+ `);
+
+ await this.subject.expand();
+ await paste(query(".filter-input"), "foo|bar");
+
+ assert.equal(this.subject.header().value(), "1,2");
+ });
});
diff --git a/app/assets/javascripts/select-kit/addon/components/category-selector.js b/app/assets/javascripts/select-kit/addon/components/category-selector.js
index b5a2cd036d8..09210dc06d7 100644
--- a/app/assets/javascripts/select-kit/addon/components/category-selector.js
+++ b/app/assets/javascripts/select-kit/addon/components/category-selector.js
@@ -40,7 +40,7 @@ export default MultiSelectComponent.extend({
return this.attrs.options.allowUncategorized;
}
- return this.selectKitOptions.allowUncategorized;
+ return this.selectKit.options.allowUncategorized;
}
return (
diff --git a/app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-filter.js b/app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-filter.js
index 9c03ea8add2..470da0c3320 100644
--- a/app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-filter.js
+++ b/app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-filter.js
@@ -10,7 +10,7 @@ export default MultiSelectFilterComponent.extend({
return;
}
- const data = event.originalEvent.clipboardData;
+ const data = event?.clipboardData;
if (!data) {
return;
diff --git a/app/assets/javascripts/select-kit/addon/components/multi-select.js b/app/assets/javascripts/select-kit/addon/components/multi-select.js
index 908f75eeb33..1708ca2f04b 100644
--- a/app/assets/javascripts/select-kit/addon/components/multi-select.js
+++ b/app/assets/javascripts/select-kit/addon/components/multi-select.js
@@ -19,6 +19,7 @@ export default SelectKitComponent.extend({
closeOnChange: false,
autoInsertNoneItem: false,
headerComponent: "multi-select/multi-select-header",
+ filterComponent: "multi-select/multi-select-filter",
autoFilterable: true,
caretDownIcon: "caretIcon",
caretUpIcon: "caretIcon",
diff --git a/app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.js b/app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.js
index 0599e708dbf..0987b2df217 100644
--- a/app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.js
+++ b/app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.js
@@ -3,6 +3,7 @@ import SelectKitFilterComponent from "select-kit/components/select-kit/select-ki
import { isEmpty } from "@ember/utils";
import discourseComputed from "discourse-common/utils/decorators";
import layout from "select-kit/templates/components/select-kit/select-kit-filter";
+import { action } from "@ember/object";
export default SelectKitFilterComponent.extend({
layout,
@@ -16,24 +17,23 @@ export default SelectKitFilterComponent.extend({
return isEmpty(placeholder) ? "" : I18n.t(placeholder);
},
- actions: {
- onPaste(event) {
- const data = event.originalEvent.clipboardData;
+ @action
+ onPaste(event) {
+ const data = event?.clipboardData;
- if (!data) {
- return;
- }
+ if (!data) {
+ return;
+ }
- const parts = data.getData("text").split("|").filter(Boolean);
+ const parts = data.getData("text").split("|").filter(Boolean);
- if (parts.length > 1) {
- event.stopPropagation();
- event.preventDefault();
+ if (parts.length > 1) {
+ event.stopPropagation();
+ event.preventDefault();
- this.selectKit.append(parts);
+ this.selectKit.append(parts);
- return false;
- }
- },
+ return false;
+ }
},
});
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit.js b/app/assets/javascripts/select-kit/addon/components/select-kit.js
index fe35f520641..1f8f9099a24 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit.js
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit.js
@@ -22,7 +22,7 @@ export const ERRORS_COLLECTION = "ERRORS_COLLECTION";
const EMPTY_OBJECT = Object.freeze({});
const SELECT_KIT_OPTIONS = Mixin.create({
- mergedProperties: ["selectKitOptions"],
+ concatenatedProperties: ["selectKitOptions"],
selectKitOptions: EMPTY_OBJECT,
});
@@ -207,13 +207,14 @@ export default Component.extend(
didReceiveAttrs() {
this._super(...arguments);
- Object.keys(this.selectKitOptions).forEach((key) => {
+ const mergedOptions = Object.assign({}, ...this.selectKitOptions);
+ Object.keys(mergedOptions).forEach((key) => {
if (isPresent(this.options[key])) {
this.selectKit.options.set(key, this.options[key]);
return;
}
- const value = this.selectKitOptions[key];
+ const value = mergedOptions[key];
if (
key === "componentForRow" ||
diff --git a/app/assets/javascripts/select-kit/addon/templates/components/select-kit/select-kit-filter.hbs b/app/assets/javascripts/select-kit/addon/templates/components/select-kit/select-kit-filter.hbs
index d674e1c20d3..1ea0b86b670 100644
--- a/app/assets/javascripts/select-kit/addon/templates/components/select-kit/select-kit-filter.hbs
+++ b/app/assets/javascripts/select-kit/addon/templates/components/select-kit/select-kit-filter.hbs
@@ -1,7 +1,23 @@
{{#unless this.isHidden}}
{{!-- filter-input-search prevents 1password from attempting autocomplete --}}
{{!-- template-lint-disable no-down-event-binding --}}
-
+
+
{{#if this.selectKit.options.filterIcon}}
{{d-icon this.selectKit.options.filterIcon class="filter-icon"}}