From 643d4378c77a2bf7a2189a096e343e14b65df78e Mon Sep 17 00:00:00 2001 From: Erbil Nas Date: Tue, 20 Feb 2024 13:56:14 +0300 Subject: [PATCH] fix(select): do not show popover if there is no options --- src/components/select/bl-select.test.ts | 16 ++++++-- src/components/select/bl-select.ts | 52 +++++++++++++------------ 2 files changed, 39 insertions(+), 29 deletions(-) diff --git a/src/components/select/bl-select.test.ts b/src/components/select/bl-select.test.ts index c16ca5e3..694ad951 100644 --- a/src/components/select/bl-select.test.ts +++ b/src/components/select/bl-select.test.ts @@ -14,7 +14,9 @@ describe("bl-select", () => { }); it("renders with default values", async () => { - const el = await fixture(html``); + const el = await fixture(html` + Option 1 + `); assert.shadowDom.equal( el, @@ -68,6 +70,12 @@ describe("bl-select", () => { expect(helpMessage).to.exist; expect(helpMessage?.innerText).to.equal(helpText); }); + it("should not show popover if there is no option", async () => { + const el = await fixture(html``); + const popover = el.shadowRoot?.querySelector(".popover"); + + expect(popover).to.not.exist; + }); it("should render bl-select-options", async () => { const el = await fixture(html` Option 1 @@ -117,7 +125,7 @@ describe("bl-select", () => { expect(selectedOptions?.textContent).contains("Option 3"); }); it("should open select menu", async () => { - const el = await fixture(html`button`); + const el = await fixture(html`Option 1`); const selectInput = el.shadowRoot?.querySelector(".select-input"); @@ -126,7 +134,7 @@ describe("bl-select", () => { expect(el.opened).to.true; }); it("should close select menu", async () => { - const el = await fixture(html`button`); + const el = await fixture(html`Option 1`); const selectInput = el.shadowRoot?.querySelector(".select-input"); @@ -137,7 +145,7 @@ describe("bl-select", () => { }); it("should close select menu when click outside & run validations", async () => { const el = await fixture(html` - + Option 1 `); const selectInput = el.shadowRoot?.querySelector(".select-input"); diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts index ee9f8f65..96fca453 100644 --- a/src/components/select/bl-select.ts +++ b/src/components/select/bl-select.ts @@ -534,31 +534,33 @@ export default class BlSelect extends Form @keydown=${this.handleKeydown} > ${label} ${this.inputTemplate()} -
- ${this.selectAllTemplate()} - - ${this.searchBar && this.noResultFound - ? html`
- ${noDataText} - { - this._handleSearchOptions({ target: { value: "" } } as InputEvent & { - target: HTMLInputElement; - }); - }} - >${clearSearchText} -
` - : ""} -
+ ${this.options.length > 0 + ? html`
+ ${this.selectAllTemplate()} + + ${this.searchBar && this.noResultFound + ? html`
+ ${noDataText} + { + this._handleSearchOptions({ target: { value: "" } } as InputEvent & { + target: HTMLInputElement; + }); + }} + >${clearSearchText} +
` + : ""} +
` + : ""}
${invalidMessage} ${helpMessage}
`; }