FIX: Checkbox value should not leak between themes (#11327)

This commit includes a hack to ensure didInsertElement is called only
once.
This commit is contained in:
Dan Ungureanu 2020-11-24 12:10:28 +02:00 committed by GitHub
parent 4b538e7cb9
commit 2742595b00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 34 deletions

View File

@ -1,42 +1,44 @@
import I18n from "I18n";
import Component from "@ember/component";
import discourseComputed, { observes } from "discourse-common/utils/decorators";
import { action } from "@ember/object";
import discourseComputed from "discourse-common/utils/decorators";
export default Component.extend({
classNames: ["inline-edit"],
checked: null,
checkedInternal: null,
buffer: null,
bufferModelId: null,
init() {
didReceiveAttrs() {
this._super(...arguments);
this.set("checkedInternal", this.checked);
if (this.modelId !== this.bufferModelId) {
// HACK: The condition above ensures this method is called only when its
// attributes are changed (i.e. only when `checked` changes).
//
// Reproduction steps: navigate to theme #1, switch to theme #2 from the
// left-side panel, then switch back to theme #1 and click on the <input>
// element wrapped by this component. It will call `didReceiveAttrs` even
// though none of the attributes have changed (only `buffer` does).
this.setProperties({
buffer: this.checked,
bufferModelId: this.modelId,
});
}
},
@observes("checked")
checkedChanged() {
this.set("checkedInternal", this.checked);
@discourseComputed("checked", "buffer")
changed(checked, buffer) {
return !!checked !== !!buffer;
},
@discourseComputed("labelKey")
label(key) {
return I18n.t(key);
@action
apply() {
this.set("checked", this.buffer);
this.action();
},
@discourseComputed("checked", "checkedInternal")
changed(checked, checkedInternal) {
return !!checked !== !!checkedInternal;
},
actions: {
cancelled() {
this.set("checkedInternal", this.checked);
},
finished() {
this.set("checked", this.checkedInternal);
this.action();
},
@action
cancel() {
this.set("buffer", this.checked);
},
});

View File

@ -1,8 +1,8 @@
<label class="checkbox-label">
{{input type="checkbox" disabled=disabled checked=checkedInternal}}
{{label}}
{{input type="checkbox" disabled=disabled checked=buffer}}
{{i18n labelKey}}
</label>
{{#if changed}}
{{d-button action=(action "finished") class="btn-primary btn-small submit-edit" icon="check"}}
{{d-button action=(action "cancelled") class="btn-small cancel-edit" icon="times"}}
{{d-button action=(action "apply") class="btn-primary btn-small submit-edit" icon="check"}}
{{d-button action=(action "cancel") class="btn-small cancel-edit" icon="times"}}
{{/if}}

View File

@ -42,7 +42,7 @@
<div class="admin-controls">
{{#if model.theme_id}}
{{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.color_scheme_user_selectable" checked=model.user_selectable}}
{{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.color_scheme_user_selectable" checked=model.user_selectable modelId=model.id}}
{{else}}
<label>
{{input type="checkbox" checked=model.user_selectable}}

View File

@ -141,11 +141,11 @@
{{#if showCheckboxes}}
<div class="control-unit">
{{#unless model.component}}
{{inline-edit-checkbox action=(action "applyDefault") labelKey="admin.customize.theme.is_default" checked=model.default}}
{{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.user_selectable" checked=model.user_selectable}}
{{inline-edit-checkbox action=(action "applyDefault") labelKey="admin.customize.theme.is_default" checked=model.default modelId=model.id}}
{{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.user_selectable" checked=model.user_selectable modelId=model.id}}
{{/unless}}
{{#if model.remote_theme}}
{{inline-edit-checkbox action=(action "applyAutoUpdateable") labelKey="admin.customize.theme.auto_update" checked=model.auto_update}}
{{inline-edit-checkbox action=(action "applyAutoUpdateable") labelKey="admin.customize.theme.auto_update" checked=model.auto_update modelId=model.id}}
{{/if}}
</div>
{{/if}}