diff --git a/src/components/select/bl-select.test.ts b/src/components/select/bl-select.test.ts index e67a2003..35dc3a4a 100644 --- a/src/components/select/bl-select.test.ts +++ b/src/components/select/bl-select.test.ts @@ -82,19 +82,7 @@ describe('bl-select', () => { expect(el.options.length).to.equal(2); expect(el.selectedOptions.length).to.equal(1); }); - it('should render bl-select-options when multiple options is true and there are selected options', async () => { - const el = await fixture(html` - Option 1 - Option 2 with a very long label to fill out the selected option label - Option 3 - Option 4 - Option 5 - `); - expect(el.options.length).to.equal(5); - expect(el.selectedOptions.length).to.equal(4, 'selectedOptions count is wrong'); - expect(el.additionalSelectedOptionCount).to.equal(3, 'non visible selected option count is wrong'); - }); it('should open select menu', async () => { const el = await fixture(html`button`); @@ -220,6 +208,44 @@ describe('bl-select', () => { expect(selectOption).is.not.exist; }); + describe('additional selection counter', () => { + let el: BlSelect; + + beforeEach(async () => { + el = await fixture(html` + Option 1 + Option 2 with a very long label to fill out the selected option label + Option 3 + Option 4 + Option 5 + `); + + await elementUpdated(el); + }); + + it('should render bl-select-options when multiple options is true and there are selected options', async () => { + expect(el.options.length).to.equal(5); + expect(el.selectedOptions.length).to.equal(4, 'selectedOptions count is wrong'); + expect(el.additionalSelectedOptionCount).to.equal(3, 'non visible selected option count is wrong'); + }); + + it('should show additional selection number', async () => { + const inputWrapper = el.shadowRoot?.querySelector('.select-input'); + + expect(inputWrapper?.classList.contains('has-overflowed-options')).to.be.true; + }); + + it('should clear additional selection number when value set', async () => { + el.value = []; + + await elementUpdated(el); + + const inputWrapper = el.shadowRoot?.querySelector('.select-input'); + + expect(inputWrapper?.classList.contains('has-overflowed-options')).to.be.false; + }); + }); + describe('value attribute', () => { describe('initial value', () => { it('should set correct option as selected when value is simple string', async () => { @@ -429,8 +455,4 @@ describe('bl-select', () => { expect((document.activeElement as BlSelectOption).value).to.equal(firstOption?.value); }); }); - - // describe('validation', () => { - // it('should ') - // }); }); diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts index 34d7d6cf..72f5f70e 100644 --- a/src/components/select/bl-select.ts +++ b/src/components/select/bl-select.ts @@ -426,7 +426,10 @@ export default class BlSelect extends Form } private _checkAdditionalItemCount() { - if (!this.multiple || !this.selectedOptionsItems || this.selectedOptionsItems.length < 2) return; + if (!this.multiple || !this.selectedOptionsItems || this.selectedOptionsItems.length < 2) { + this._additionalSelectedOptionCount = 0; + return; + } const firstNonVisibleItemIndex = [...this.selectedOptionsItems] .findIndex((item) => item.offsetLeft > this.selectedOptionsContainer.offsetWidth);