Fix: Unselecting option after reaching maximum item limit does not remove the notice Choices-js#1249

Author: ticktackk

public/test/select-multiple/index.html

@@ -335,6 +335,31 @@ <h2>Select multiple inputs</h2>
           </script>
         </div>
 
+        <div data-test-hook="selection-limit-note-after-unselecting-choice">
+          <label for="choices-selection-limit-note-after-unselecting-choice">Input limit note after unselecting choice</label>
+          <select
+            class="form-control"
+            name="choices-selection-limit-note-after-unselecting-choice"
+            id="choices-selection-limit-note-after-unselecting-choice"
+            multiple
+          >
+            <option value="Choice 1">Choice 1</option>
+            <option value="Choice 2">Choice 2</option>
+            <option value="Choice 3">Choice 3</option>
+            <option value="Choice 4">Choice 4</option>
+            <option value="Choice 5">Choice 5</option>
+          </select>
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              new Choices('#choices-selection-limit-note-after-unselecting-choice', {
+                allowHTML: true,
+                maxItemCount: 5,
+                removeItemButton: true
+              });
+            });
+          </script>
+        </div>
+
         <div data-test-hook="prepend-append">
           <label for="choices-prepend-append">Prepend/append</label>
           <select

src/scripts/choices.ts

@@ -1404,6 +1404,10 @@ class Choices {
       return false;
     }
 
+    if (this._notice && this._notice.type === NoticeTypes.addChoice) {
+      this._clearNotice();
+    }
+
     return true;
   }
 

test-e2e/test-suit.ts

@@ -165,6 +165,15 @@ export class TestSuit {
     await expect(this.dropdown).toBeHidden();
   }
 
+  async expectHiddenNotice(singleItem: boolean = false): Promise<void> {
+    await this.advanceClock();
+
+    if (singleItem) {
+      await expect(this.dropdown.locator('> *:not(input)')).toHaveCount(0);
+    }
+    await expect(this.dropdown.locator('.choices__notice')).toBeHidden();
+  }
+
   // eslint-disable-next-line class-methods-use-this
   getWrappedElement(): Locator {
     throw new Error('Not implemented');

test-e2e/tests/select-multiple.spec.ts

@@ -478,11 +478,24 @@ describe(`Choices - select multiple`, () => {
     });
 
     describe('selection limit', () => {
-      const testId = 'selection-limit';
+      const displaysTestId = 'selection-limit';
       const selectionLimit = 5;
 
       test('displays "limit reached" prompt', async ({ page, bundle }) => {
-        const suite = new SelectTestSuit(page, bundle, testUrl, testId);
+        const suite = new SelectTestSuit(page, bundle, testUrl, displaysTestId);
+        await suite.startWithClick();
+
+        for (let index = 0; index < selectionLimit; index++) {
+          await suite.selectableChoices.first().click();
+          await suite.advanceClock();
+        }
+
+        await suite.expectVisibleNoticeHtml(`Only ${selectionLimit} values can be added`);
+      });
+
+      const hidesTestId = 'selection-limit-note-after-unselecting-choice';
+      test('hides "limit reached" prompt', async ({ page, bundle }) => {
+        const suite = new SelectTestSuit(page, bundle, testUrl, hidesTestId);
         await suite.startWithClick();
 
         for (let index = 0; index < selectionLimit; index++) {
@@ -491,6 +504,11 @@ describe(`Choices - select multiple`, () => {
         }
 
         await suite.expectVisibleNoticeHtml(`Only ${selectionLimit} values can be added`);
+
+        await suite.items.getByRole('button', { name: 'Remove item' }).last().click();
+        await suite.advanceClock();
+
+        await suite.expectHiddenNotice();
       });
     });