tor-browser

commit d872af8102ede9455e8b8539c74e187185cf28af
parent e28965f40ca1095a78c35b02a62f8429ea46bd11
Author: Anna Kulyk <akulyk@mozilla.com>
Date:   Tue, 30 Sep 2025 18:20:18 +0000

Bug 1985092 - update moz-select state when value is set r=tgiles

Differential Revision: https://phabricator.services.mozilla.com/D262438

Diffstat:
M
toolkit/content/tests/widgets/test_moz_select.html
 | 
20
++++++++++++++++++++
M
toolkit/content/widgets/moz-select/moz-select.mjs
 | 
14
+++++++++++---

2 files changed, 31 insertions(+), 3 deletions(-)
diff --git a/toolkit/content/tests/widgets/test_moz_select.html b/toolkit/content/tests/widgets/test_moz_select.html
@@ -131,11 +131,31 @@
 
         let mozOptions = select.querySelectorAll("moz-option");
         mozOptions[0].iconSrc = "chrome://global/skin/icons/info.svg";
+        mozOptions[1].iconSrc = "chrome://global/skin/icons/warning.svg";
         await TestUtils.waitForTick();
         await select.updateComplete;
 
         info("New iconSrc value was added to the selected option.");
         ok(selectWrapper.classList.contains("with-icon"), "Select has an icon");
+        is(
+          select.shadowRoot.querySelector(".select-option-icon").src,
+          mozOptions[0].iconSrc,
+          "Select displays the icon of the selected option"
+        );
+
+        select.value = "value";
+        await select.updateComplete;
+        is(select.value, "value", "Second option is selected");
+        is(
+          select.inputEl.value,
+          select.value,
+          "Select element value is updated"
+        );
+        is(
+          select.shadowRoot.querySelector(".select-option-icon").src,
+          mozOptions[1].iconSrc,
+          "Select displays the icon of the newly selected option"
+        );
       });
     </script>
   </head>
diff --git a/toolkit/content/widgets/moz-select/moz-select.mjs b/toolkit/content/widgets/moz-select/moz-select.mjs
@@ -26,6 +26,8 @@ import { MozBaseInputElement, MozLitElement } from "../lit-utils.mjs";
  *     default slot. Do not set directly, these will be overridden by <moz-option> children.
  */
 export default class MozSelect extends MozBaseInputElement {
+  #optionIconSrcMap = new Map();
+
   static properties = {
     options: { type: Array, state: true },
   };
@@ -59,11 +61,11 @@ export default class MozSelect extends MozBaseInputElement {
   }
 
   get _selectedOptionIconSrc() {
-    if (!this.inputEl) {
+    if (!this.inputEl || !this.options.length) {
       return "";
     }
-    const selectedOption = this.options[this.inputEl.selectedIndex];
-    return selectedOption?.iconSrc ?? "";
+
+    return this.#optionIconSrcMap.get(this.value) ?? "";
   }
 
   /**
@@ -71,6 +73,7 @@ export default class MozSelect extends MozBaseInputElement {
    */
   populateOptions() {
     this.options = [];
+    this.#optionIconSrcMap.clear();
 
     for (const node of this.slotRef.value.assignedNodes()) {
       if (node.localName === "moz-option") {
@@ -82,6 +85,10 @@ export default class MozSelect extends MozBaseInputElement {
           label: optionLabel,
           iconSrc: optionIconSrc,
         });
+
+        if (optionIconSrc) {
+          this.#optionIconSrcMap.set(optionValue, optionIconSrc);
+        }
       }
     }
   }
@@ -129,6 +136,7 @@ export default class MozSelect extends MozBaseInputElement {
         <select
           id="input"
           name=${this.name}
+          .value=${this.value}
           accesskey=${this.accessKey}
           @input=${this.handleStateChange}
           @change=${this.redispatchEvent}