From 0ee8a414a4b185ffa5b225f66c4bf0c802c35a60 Mon Sep 17 00:00:00 2001 From: Jay Harris Date: Mon, 14 Oct 2024 09:57:00 +1300 Subject: [PATCH] [Toggle]: Fix toggles not toggling --- .../cr_elements/cr_toggle/cr_toggle.ts | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/ui/webui/resources/cr_elements/cr_toggle/cr_toggle.ts b/ui/webui/resources/cr_elements/cr_toggle/cr_toggle.ts index 405663ab1f65..fd0f3ae71b4f 100644 --- a/ui/webui/resources/cr_elements/cr_toggle/cr_toggle.ts +++ b/ui/webui/resources/cr_elements/cr_toggle/cr_toggle.ts @@ -5,7 +5,7 @@ import '//resources/brave/leo.bundle.js' -import {CrLitElement, css} from '//resources/lit/v3_0/lit.rollup.js'; +import { CrLitElement, css } from '//resources/lit/v3_0/lit.rollup.js'; import { getHtml } from './cr_toggle.html.js'; export interface CrToggleElement { @@ -32,6 +32,7 @@ export class CrToggleElement extends CrLitElement { checked: { type: Boolean, reflect: true, + notify: true, }, disabled: { @@ -44,11 +45,26 @@ export class CrToggleElement extends CrLitElement { checked: boolean = false; disabled: boolean = false; + override firstUpdated(){ + this.addEventListener('click', e => { + // Prevent |click| event from bubbling. It can cause parents of this + // elements to erroneously re-toggle this control. + e.stopPropagation(); + e.preventDefault(); + }) + } + // The Nala event looks a bit different to the Chromium one, so we need to // convert it. - onChange_(e: { checked: boolean }) { + async onChange_(e: { checked: boolean }) { this.checked = e.checked - this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: e.checked })) + + // Yield, so that 'checked-changed' (originating from `notify: 'true'`) fire + // before the 'change' event below, which guarantees that any Polymer parent + // with 2-way bindings on the `checked` attribute are updated first. + await this.updateComplete + + this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.checked })) } }