diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts index 21e772431c0..e974d1c6c9a 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts @@ -42,6 +42,7 @@ describe("calcite-input-time-zone", () => { describe("reflects", () => { reflects("calcite-input-time-zone", [ { propertyName: "disabled", value: true }, + { propertyName: "maxItems", value: 0 }, { propertyName: "open", value: true }, { propertyName: "scale", value: "m" }, { propertyName: "overlayPositioning", value: "absolute" }, @@ -51,6 +52,7 @@ describe("calcite-input-time-zone", () => { describe("defaults", () => { defaults("calcite-input-time-zone", [ { propertyName: "disabled", defaultValue: false }, + { propertyName: "maxItems", defaultValue: 0 }, { propertyName: "messageOverrides", defaultValue: undefined }, { propertyName: "open", defaultValue: false }, { propertyName: "overlayPositioning", defaultValue: "absolute" }, @@ -120,4 +122,14 @@ describe("calcite-input-time-zone", () => { expect(await input.getProperty("value")).toBe("-360"); expect(await selectedTimeZoneItem.getProperty("textLabel")).toMatch("GMT-6"); }); + + it("supports setting maxItems to display", async () => { + const page = await newE2EPage(); + await page.setContent(html``); + + const internalCombobox = await page.find("calcite-input-time-zone >>> calcite-combobox"); + + // we assume maxItems works properly on combobox + expect(await internalCombobox.getProperty("maxItems")).toBe(7); + }); }); diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx index 2ee842e5855..3f36e0279bd 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx @@ -80,6 +80,9 @@ export class InputTimeZone */ @Prop({ reflect: true }) form: string; + /** Specifies the component's maximum number of options to display before displaying a scrollbar. */ + @Prop({ reflect: true }) maxItems = 0; + /** * Made into a prop for testing purposes only * @@ -301,6 +304,7 @@ export class InputTimeZone disabled={this.disabled} label={this.messages.chooseTimeZone} lang={this.effectiveLocale} + maxItems={this.maxItems} onCalciteComboboxBeforeClose={this.onComboboxBeforeClose} onCalciteComboboxBeforeOpen={this.onComboboxBeforeOpen} onCalciteComboboxChange={this.onComboboxChange}