commit d08dee73fb25d0ed16b6d3d218f43447253065b5
parent 0a681e6e150c451fec42f3be55c0499fd7571116
Author: Emma Zuehlcke <emz@mozilla.com>
Date: Tue, 11 Nov 2025 11:18:20 +0000
Bug 1997393 - Add storybook stories and tests for disabled and hidden moz-option properties. r=hjones
Differential Revision: https://phabricator.services.mozilla.com/D272065
Diffstat:
2 files changed, 91 insertions(+), 1 deletion(-)
diff --git a/toolkit/content/tests/widgets/test_moz_select.html b/toolkit/content/tests/widgets/test_moz_select.html
@@ -157,6 +157,80 @@
"Select displays the icon of the newly selected option"
);
});
+
+ function openSelectAndGetMenuPopup(select) {
+ let topWindow = window.docShell.chromeEventHandler.ownerGlobal;
+ let pickerOpened = BrowserTestUtils.waitForSelectPopupShown(topWindow);
+ select.focus();
+ synthesizeKey(" ");
+ return pickerOpened;
+ }
+
+ /**
+ * Test that hidden and disabled moz-option are reflected in the popup menu.
+ */
+ add_task(async function testMozSelectHiddenAndDisabledOptions() {
+ let target = await testHelpers.renderTemplate();
+ let select = target.querySelector("moz-select");
+ await select.updateComplete;
+
+ let mozOptions = select.querySelectorAll("moz-option");
+
+ // Open select and verify all elements are visible and enabled.
+ let popup = await openSelectAndGetMenuPopup(select);
+ let popupItems = Array.from(popup.children);
+
+ // Items that are hidden are not included in the popup's children.
+ is(popupItems.length, mozOptions.length, "All options are shown");
+ for (let i = 0; i < popupItems.length; i++) {
+ ok(!popupItems[i].disabled, `Option ${i} is enabled`);
+ }
+
+ // Close popup.
+ let hiddenPromise = BrowserTestUtils.waitForPopupEvent(popup, "hidden");
+ popup.hidePopup();
+ await hiddenPromise;
+
+ await TestUtils.waitForTick();
+ await select.updateComplete;
+
+ // set first option to disabled and second option to hidden.
+ mozOptions[0].disabled = true;
+ mozOptions[1].hidden = true;
+
+ await TestUtils.waitForTick();
+ await select.updateComplete;
+
+ // open select and verify first option is disabled and second option is hidden.
+ popup = await openSelectAndGetMenuPopup(select);
+ popupItems = Array.from(popup.children);
+
+ is(
+ popupItems.length,
+ mozOptions.length - 1,
+ "All but one option shown"
+ );
+
+ ok(popupItems[0].disabled, "First option is disabled");
+ is(popupItems[0].label, mozOptions[0].label, "First option is visible");
+ ok(!popupItems[1].disabled, "Second option is enabled");
+ is(popupItems[1].label, mozOptions[2].label, "Third option is visible");
+ ok(!popupItems[2].disabled, "Third option is enabled");
+ is(
+ popupItems[2].label,
+ mozOptions[3].label,
+ "Fourth option is visible"
+ );
+
+ // Close popup.
+ hiddenPromise = BrowserTestUtils.waitForPopupEvent(popup, "hidden");
+ popup.hidePopup();
+ await hiddenPromise;
+
+ // Reset options
+ mozOptions[0].disabled = false;
+ mozOptions[1].hidden = false;
+ });
</script>
</head>
<body></body>
diff --git a/toolkit/content/widgets/moz-select/moz-select.stories.mjs b/toolkit/content/widgets/moz-select/moz-select.stories.mjs
@@ -109,6 +109,8 @@ const Template = ({
options = useOtherOptions ? OTHER_OPTIONS : DEFAULT_OPTIONS,
hasSlottedSupportLink,
ellipsized,
+ disabledOption,
+ hiddenOption,
}) => html`
<div style="width:300px">
<moz-select
@@ -128,11 +130,13 @@ const Template = ({
? html`<a slot="support-link" href="www.example.com">Click me!</a>`
: ""}
${options.map(
- opt =>
+ (opt, i) =>
html`<moz-option
value=${opt.value}
data-l10n-id=${opt.l10nId}
iconsrc=${opt.iconSrc}
+ ?disabled=${disabledOption && i == 1}
+ ?hidden=${hiddenOption && i == 2}
></moz-option>`
)}
</moz-select>
@@ -225,3 +229,15 @@ WithEllipsizedLabel.args = {
ellipsized: true,
l10nId: "moz-select-long-label",
};
+
+export const WithDisabledOption = Template.bind({});
+WithDisabledOption.args = {
+ ...Default.args,
+ disabledOption: true,
+};
+
+export const WithHiddenOption = Template.bind({});
+WithHiddenOption.args = {
+ ...Default.args,
+ hiddenOption: true,
+};
