diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f1abbb2..48c18355 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,8 +7,8 @@ ### Bug Fixes (from 11.0.0) * Fix choice disable state wasn't considered when showing the "no choices to choose from" notice -* Fix regression "no choices to choose from" notice not triggering when no selectable choices exist for select-one. [#1185](https://github.com/Choices-js/Choices/issues/1185) -* Fix regression where webpack doesn't permit importing scss/css @tagliala (#1193) +* Fix regression where webpack doesn't permit importing scss/css @tagliala [#1193](https://github.com/Choices-js/Choices/issues/1193) +* Fix regression "no choices to choose from"/"no results found" notice did not reliably trigger. [#1185](https://github.com/Choices-js/Choices/issues/1185) [#1191](https://github.com/Choices-js/Choices/issues/1191) * Fix regression of UnhighlightItem event not firing [#1173](https://github.com/Choices-js/Choices/issues/1173) ### Chore diff --git a/src/scripts/choices.ts b/src/scripts/choices.ts index d3c5fa00..78be45d4 100644 --- a/src/scripts/choices.ts +++ b/src/scripts/choices.ts @@ -826,6 +826,7 @@ class Choices { if (!choice) { return this; } + this._clearNotice(); this._store.dispatch(removeChoice(choice)); // @todo integrate with Store this._searcher.reset(); @@ -846,7 +847,7 @@ class Choices { clearStore(): this { this.itemList.element.replaceChildren(''); this.choiceList.element.replaceChildren(''); - this._clearNotice(); + this._stopSearch(); this._store.reset(); this._lastAddedChoiceId = 0; this._lastAddedGroupId = 0; @@ -859,11 +860,7 @@ class Choices { clearInput(): this { const shouldSetInputWidth = !this._isSelectOneElement; this.input.clear(shouldSetInputWidth); - this._clearNotice(); - - if (this._isSearching) { - this._stopSearch(); - } + this._stopSearch(); return this; } @@ -999,17 +996,14 @@ class Choices { } } - const notice = this._notice; if (!selectableChoices) { - if (!notice) { + if (!this._notice) { this._notice = { - text: resolveStringFunction(config.noChoicesText), - type: NoticeTypes.noChoices, + text: resolveStringFunction(isSearching ? config.noResultsText : config.noChoicesText), + type: isSearching ? NoticeTypes.noResults : NoticeTypes.noChoices, }; } fragment.replaceChildren(''); - } else if (notice && notice.type === NoticeTypes.noChoices) { - this._notice = undefined; } this._renderNotice(fragment); @@ -1463,6 +1457,7 @@ class Choices { const wasSearching = this._isSearching; this._currentValue = ''; this._isSearching = false; + this._clearNotice(); if (wasSearching) { this._store.dispatch(activateChoices(true)); @@ -1639,8 +1634,6 @@ class Choices { this._stopSearch(); } - this._clearNotice(); - return; } @@ -2090,6 +2083,7 @@ class Choices { (choice.element as HTMLOptionElement).value = choice.value; } + this._clearNotice(); this._store.dispatch(addChoice(choice)); if (choice.selected) { diff --git a/test-e2e/tests/select-multiple.spec.ts b/test-e2e/tests/select-multiple.spec.ts index e5eae13a..79425787 100644 --- a/test-e2e/tests/select-multiple.spec.ts +++ b/test-e2e/tests/select-multiple.spec.ts @@ -382,7 +382,7 @@ describe(`Choices - select multiple`, () => { await suite.startWithClick(); await expect(suite.selectableChoices).toHaveCount(0); - await suite.expectVisibleNoticeHtml('No choices to choose from'); + await suite.expectVisibleNoticeHtml('No choices to choose from', true); }); }); @@ -393,7 +393,21 @@ describe(`Choices - select multiple`, () => { await suite.startWithClick(); await expect(suite.selectableChoices).toHaveCount(0); - await suite.expectVisibleNoticeHtml('No choices to choose from'); + await suite.expectVisibleNoticeHtml('No choices to choose from', true); + }); + + test('shows no results banner and then no choices banner', async ({ page, bundle }) => { + const invalidLabel = 'faergge'; + const suite = new SelectTestSuit(page, bundle, testUrl, testId); + await suite.startWithClick(); + + await suite.typeText(invalidLabel); + await expect(suite.selectableChoices).toHaveCount(0); + await suite.expectVisibleNoticeHtml('No results found', true); + + await suite.typeText(''); + await expect(suite.selectableChoices).toHaveCount(0); + await suite.expectVisibleNoticeHtml('No choices to choose from', true); }); }); diff --git a/test-e2e/tests/select-one.spec.ts b/test-e2e/tests/select-one.spec.ts index c6dc563e..e3ae2d8b 100644 --- a/test-e2e/tests/select-one.spec.ts +++ b/test-e2e/tests/select-one.spec.ts @@ -239,7 +239,7 @@ describe(`Choices - select one`, () => { await suite.startWithClick(); await expect(suite.selectableChoices).toHaveCount(0); - await suite.expectVisibleNoticeHtml('No choices to choose from'); + await suite.expectVisibleNoticeHtml('No choices to choose from', true); }); }); @@ -250,7 +250,21 @@ describe(`Choices - select one`, () => { await suite.startWithClick(); await expect(suite.selectableChoices).toHaveCount(0); - await suite.expectVisibleNoticeHtml('No choices to choose from'); + await suite.expectVisibleNoticeHtml('No choices to choose from', true); + }); + + test('shows no results banner and then no choices banner', async ({ page, bundle }) => { + const invalidLabel = 'faergge'; + const suite = new SelectTestSuit(page, bundle, testUrl, testId); + await suite.startWithClick(); + + await suite.typeText(invalidLabel); + await expect(suite.selectableChoices).toHaveCount(0); + await suite.expectVisibleNoticeHtml('No results found', true); + + await suite.typeText(''); + await expect(suite.selectableChoices).toHaveCount(0); + await suite.expectVisibleNoticeHtml('No choices to choose from', true); }); });