diff --git a/tools/cldr-apps/js/src/views/DashboardWidget.vue b/tools/cldr-apps/js/src/views/DashboardWidget.vue index 67f6c422a48..0c7231368b6 100644 --- a/tools/cldr-apps/js/src/views/DashboardWidget.vue +++ b/tools/cldr-apps/js/src/views/DashboardWidget.vue @@ -360,7 +360,13 @@ export default { }, catCheckmarkChanged(event, category) { - this.catIsHidden[category] = !event.target.checked; + // setTimeout solves a weakness in the Vue implementation: if the number of + // notifications is large, the checkbox in the header can take a second or more + // to change its visible state in response to the user's click, during which time + // the user may click again thinking the first click wasn't recognized. Postponing + // the DOM update of thousands of rows ensures that the header checkbox updates + // without delay. + setTimeout(() => (this.catIsHidden[category] = !event.target.checked), 0); }, canBeHidden(cats) { diff --git a/tools/cldr-apps/js/test/TestCldrDash.mjs b/tools/cldr-apps/js/test/TestCldrDash.mjs index 815f60c28b1..33dc59fd00e 100644 --- a/tools/cldr-apps/js/test/TestCldrDash.mjs +++ b/tools/cldr-apps/js/test/TestCldrDash.mjs @@ -47,9 +47,15 @@ describe("cldrDash.updatePath", function () { assert.strictEqual(countEntriesForPath(data1, "710b6e70773e5764"), 1); assert.strictEqual(countEntriesForPath(data1, "64a8a83fbacdf836"), 1); // the entry for 710b6e70773e5764 should have 3 notifications - assert.strictEqual(countNotificationsForEntry(data1, "710b6e70773e5764"), 3); + assert.strictEqual( + countNotificationsForEntry(data1, "710b6e70773e5764"), + 3 + ); // the entry for 64a8a83fbacdf836 should have 1 notification - assert.strictEqual(countNotificationsForEntry(data1, "64a8a83fbacdf836"), 1); + assert.strictEqual( + countNotificationsForEntry(data1, "64a8a83fbacdf836"), + 1 + ); }); it("should remove entries", function () { @@ -61,7 +67,10 @@ describe("cldrDash.updatePath", function () { assert.strictEqual(countEntriesForPath(data2, "710b6e70773e5764"), 0); assert.strictEqual(countEntriesForPath(data2, "64a8a83fbacdf836"), 1); // the entry for 64a8a83fbacdf836 should have 1 notification - assert.strictEqual(countNotificationsForEntry(data2, "64a8a83fbacdf836"), 1); + assert.strictEqual( + countNotificationsForEntry(data2, "64a8a83fbacdf836"), + 1 + ); }); });