fix(select): do not show popover if there are no options (Trendyol#803)

Closes Trendyol#794 Co-authored-by: Erbil Nas <erbil.nas@trendyol.com>
agursoyy · Feb 28, 2024 · 159b706 · 159b706
1 parent e1c54b9
commit 159b706
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 29 deletions.
diff --git 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<BlSelect>(html`<bl-select></bl-select>`);
+ const el = await fixture<BlSelect>(html`<bl-select>
+ <bl-select-option value="1">Option 1</bl-select-option>
+ </bl-select>`);
 
  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<BlSelect>(html`<bl-select></bl-select>`);
+ const popover = el.shadowRoot?.querySelector(".popover");
+
+ expect(popover).to.not.exist;
+ });
  it("should render bl-select-options", async () => {
  const el = await fixture<BlSelect>(html`<bl-select>
  <bl-select-option value="1">Option 1</bl-select-option>
@@ -117,7 +125,7 @@ describe("bl-select", () => {
  expect(selectedOptions?.textContent).contains("Option 3");
  });
  it("should open select menu", async () => {
- const el = await fixture<BlSelect>(html`<bl-select>button</bl-select>`);
+ const el = await fixture<BlSelect>(html`<bl-select><bl-select-option value="1">Option 1</bl-select-option></bl-select>`);
 
  const selectInput = el.shadowRoot?.querySelector<HTMLDivElement>(".select-input");
 
@@ -126,7 +134,7 @@ describe("bl-select", () => {
  expect(el.opened).to.true;
  });
  it("should close select menu", async () => {
- const el = await fixture<BlSelect>(html`<bl-select>button</bl-select>`);
+ const el = await fixture<BlSelect>(html`<bl-select><bl-select-option value="1">Option 1</bl-select-option></bl-select>`);
 
  const selectInput = el.shadowRoot?.querySelector<HTMLDivElement>(".select-input");
 
@@ -137,7 +145,7 @@ describe("bl-select", () => {
  });
  it("should close select menu when click outside & run validations", async () => {
  const el = await fixture<BlSelect>(html`<body>
- <bl-select required invalid-text="This field is mandatory"></bl-select>
+ <bl-select required invalid-text="This field is mandatory"><bl-select-option value="1">Option 1</bl-select-option></bl-select>
  </body>`);
 
  const selectInput = el.shadowRoot?.querySelector<HTMLDivElement>(".select-input");

diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts
@@ -534,31 +534,33 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
  @keydown=${this.handleKeydown}
  >
  ${label} ${this.inputTemplate()}
- <div
- class="popover"
- tabindex="${ifDefined(this._isPopoverOpen ? undefined : "-1")}"
- @bl-select-option=${this._handleSelectOptionEvent}
- role="listbox"
- aria-multiselectable="${this.multiple}"
- aria-labelledby="label"
- >
- ${this.selectAllTemplate()}
- <slot></slot>
- ${this.searchBar && this.noResultFound
- ? html`<div name="popover-clear-search-text" class="popover-no-result">
- <span>${noDataText}</span>
- <bl-button
- variant="tertiary"
- @click=${() => {
- this._handleSearchOptions({ target: { value: "" } } as InputEvent & {
- target: HTMLInputElement;
- });
- }}
- >${clearSearchText}</bl-button
- >
- </div>`
- : ""}
- </div>
+ ${this.options.length > 0
+ ? html` <div
+ class="popover"
+ tabindex="${ifDefined(this._isPopoverOpen ? undefined : "-1")}"
+ @bl-select-option=${this._handleSelectOptionEvent}
+ role="listbox"
+ aria-multiselectable="${this.multiple}"
+ aria-labelledby="label"
+ >
+ ${this.selectAllTemplate()}
+ <slot></slot>
+ ${this.searchBar && this.noResultFound
+ ? html`<div name="popover-clear-search-text" class="popover-no-result">
+ <span>${noDataText}</span>
+ <bl-button
+ variant="tertiary"
+ @click=${() => {
+ this._handleSearchOptions({ target: { value: "" } } as InputEvent & {
+ target: HTMLInputElement;
+ });
+ }}
+ >${clearSearchText}</bl-button
+ >
+ </div>`
+ : ""}
+ </div>`
+ : ""}
  <div class="hint">${invalidMessage} ${helpMessage}</div>
  </div> `;
  }