github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-24 03:36:18 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: Do not rerender widget-dropdown on all clicks (#10100)

Browse Source 
Because of how the dropdown was structured, as long it was in the DOM, all clicks outside the widget would rerender it.

This commit introduces `widget-dropdown-body` that handles the `clickOutside` callback and is rendered conditionally, so it won't get called when the dropdown is closed.
This commit is contained in:
Jarek Radosz
2020-07-06 17:04:16 +02:00
committed by GitHub
parent 3b51e05de2
commit 194c962124
2 changed files with 94 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
test/javascripts/widgets/widget-dropdown-test.js
View File

@ -112,7 +112,8 @@ widgetTest("content", {
this.setProperties(DEFAULT_CONTENT);
},
test(assert) {
async test(assert) {
await toggle();
assert.equal(rowById(1).dataset.id, 1, "it creates rows");
assert.equal(rowById(2).dataset.id, 2, "it creates rows");
assert.equal(rowById(3).dataset.id, 3, "it creates rows");
@ -143,6 +144,7 @@ widgetTest("onChange action", {
},
async test(assert) {
await toggle();
await clickRowById(2);
assert.equal(find("#test").text(), 2, "it calls the onChange actions");
}
@ -157,10 +159,14 @@ widgetTest("can be opened and closed", {
async test(assert) {
assert.ok(exists("#my-dropdown.closed"));
assert.ok(!exists("#my-dropdown .widget-dropdown-body"));
await toggle();
assert.equal(rowById(2).innerText.trim(), "FooBar");
assert.ok(exists("#my-dropdown.opened"));
assert.ok(exists("#my-dropdown .widget-dropdown-body"));
await toggle();
assert.ok(exists("#my-dropdown.closed"));
assert.ok(!exists("#my-dropdown .widget-dropdown-body"));
}
});
@ -197,7 +203,8 @@ widgetTest("content with translatedLabel", {
this.setProperties(DEFAULT_CONTENT);
},
test(assert) {
async test(assert) {
await toggle();
assert.equal(rowById(2).innerText.trim(), "FooBar");
}
});
@ -216,7 +223,8 @@ widgetTest("content with label", {
I18n.translations = this._translations;
},
test(assert) {
async test(assert) {
await toggle();
assert.equal(rowById(1).innerText.trim(), "FooBaz");
}
});
@ -228,7 +236,8 @@ widgetTest("content with icon", {
this.setProperties(DEFAULT_CONTENT);
},
test(assert) {
async test(assert) {
await toggle();
assert.ok(exists(rowById(3).querySelector(".d-icon-times")));
}
});
@ -240,7 +249,8 @@ widgetTest("content with html", {
this.setProperties(DEFAULT_CONTENT);
},
test(assert) {
async test(assert) {
await toggle();
assert.equal(rowById(4).innerHTML.trim(), "<span><b>baz</b></span>");
}
});
@ -252,7 +262,8 @@ widgetTest("separator", {
this.setProperties(DEFAULT_CONTENT);
},
test(assert) {
async test(assert) {
await toggle();
assert.ok(
find(
"#my-dropdown .widget-dropdown-item:nth-child(3)"
@ -297,7 +308,8 @@ widgetTest("bodyClass option", {
this.set("options", { bodyClass: "gigantic and-yet-small" });
},
test(assert) {
async test(assert) {
await toggle();
assert.ok(body().classList.contains("widget-dropdown-body"));
assert.ok(body().classList.contains("gigantic"));
assert.ok(body().classList.contains("and-yet-small"));