From a939609d32bdcff43dd5b5b889f016495844298e Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Tue, 12 Jul 2022 21:38:17 +0200 Subject: [PATCH] FIX: fixes few regressions in select-kit (#17453) - following https://github.com/discourse/discourse/commit/c3fd91670e30bb70a2e0617be3faff41edaba1ba `paste` has been typoed into `pase` - adds two tests for pasting in `multi-select` and `email-group-user-chooser` - selectKitOptions would not be following the right overriding order - `category-selector` was using `selectKitOptions` directly which shouldn't be the case as it's not using computed values - apparently since a recent ember upgrade, paste event is not providing `originalEvent` anymore and `clipboardData` should be retrieved directly on the event --- .../email-group-user-chooser-test.js | 51 +++++++++++++++++++ .../select-kit/multi-select-test.js | 18 +++++++ .../addon/components/category-selector.js | 2 +- .../email-group-user-chooser-filter.js | 2 +- .../addon/components/multi-select.js | 1 + .../multi-select/multi-select-filter.js | 28 +++++----- .../select-kit/addon/components/select-kit.js | 7 +-- .../select-kit/select-kit-filter.hbs | 18 ++++++- 8 files changed, 107 insertions(+), 20 deletions(-) create mode 100644 app/assets/javascripts/discourse/tests/integration/components/select-kit/email-group-user-chooser-test.js 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"}}