Allow deselect when renderSelectedChoices enabled

README.md

@@ -356,6 +356,14 @@ Pass an array of objects:
 
 **Usage:** The amount of items a user can input/select ("-1" indicates no limit).
 
+### renderItems
+
+**Type:** `Boolean` **Default:** `true`
+
+**Input types affected:** `text`, `select-multiple`
+
+**Usage:** Whether to render items.
+
 ### closeDropdownOnSelect
 
 **Type:** `Boolean` | 'auto' **Default:** `auto`
@@ -859,7 +867,7 @@ const example = new Choices(element, {
         return template(`
           <div class="${getClassNames(classNames.item).join(' ')} ${getClassNames(classNames.itemChoice).join(' ')} ${
           getClassNames(data.disabled ? classNames.itemDisabled : classNames.itemSelectable).join(' ')
-        }" data-select-text="${this.config.itemSelectText}" data-choice ${
+        }" data-select-text="${this.config.itemSelectText}" data-deselect-text="${this.config.itemDeselectText}" data-choice ${
           data.disabled
             ? 'data-choice-disabled aria-disabled="true"'
             : 'data-choice-selectable'

public/index.html

@@ -199,6 +199,20 @@ <h2>Multiple select input</h2>
           <option value="Choice 4" disabled>Choice 4</option>
         </select>
 
+        <label for="choices-multiple-keep">Keep in dropdown without rendering items</label>
+        <select
+          class="form-control"
+          name="choices-multiple-default"
+          id="choices-multiple-keep"
+          placeholder="This is a placeholder"
+          multiple
+        >
+          <option value="Choice 1" selected>Choice 1</option>
+          <option value="Choice 2">Choice 2</option>
+          <option value="Choice 3">Choice 3</option>
+          <option value="Choice 4" disabled>Choice 4</option>
+        </select>
+
         <label for="choices-multiple-remove-button">With remove button</label>
         <select
           class="form-control"
@@ -640,6 +654,11 @@ <h2>Form interaction</h2>
           ],
         });
 
+        var multipleKeep = new Choices(
+          document.getElementById('choices-multiple-keep'),
+          { renderSelectedChoices: 'always', renderItems: false }
+        );
+
         var multipleDefault = new Choices(
           document.getElementById('choices-multiple-groups'),
           { allowHTML: true }

public/test/select-multiple/index.html

@@ -128,6 +128,30 @@ <h2>Select multiple inputs</h2>
           </script>
         </div>
 
+        <div data-test-hook="dont-render-selected-items">
+          <label for="choices-remove-button">Don't render selected items</label>
+          <select
+            class="form-control"
+            name="dont-render-selected-items"
+            id="dont-render-selected-items"
+            multiple
+          >
+            <option value="Choice 1" selected>Choice 1</option>
+            <option value="Choice 2">Choice 2</option>
+            <option value="Choice 3">Choice 3</option>
+            <option value="Choice 4">Choice 4</option>
+          </select>
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              new Choices('#dont-render-selected-items', {
+                allowHTML: true,
+                renderSelectedChoices: true,
+                renderItems: false,
+              });
+            });
+          </script>
+        </div>
+
         <div data-test-hook="remove-button">
           <label for="choices-remove-button">Remove button</label>
           <select

src/scripts/choices.ts

@@ -930,7 +930,7 @@
       }
     }
 
-    if (changes.items) {
+    if (changes.items && this.config.renderItems) {
       this._renderItems();
     }
   }
@@ -1294,6 +1294,11 @@
       });
 
       this._triggerChange(choice.value);
+    } else if (this.config.renderSelectedChoices && this._isSelectMultipleElement) {
+        this._store.withTxn(() => {
+            this._removeItem(choice);
+        });
+        this._triggerChange(choice.value);
     }
 
     // We want to close the dropdown if we are dealing with a single select box

src/scripts/defaults.ts

@@ -40,6 +40,7 @@ export const DEFAULT_CONFIG: Options = {
   silent: false,
   renderChoiceLimit: -1,
   maxItemCount: -1,
+  renderItems: true,
   closeDropdownOnSelect: 'auto',
   singleModeForMultiSelect: false,
   addChoices: false,
@@ -75,6 +76,7 @@ export const DEFAULT_CONFIG: Options = {
   noResultsText: 'No results found',
   noChoicesText: 'No choices to choose from',
   itemSelectText: 'Press to select',
+  itemDeselectText: 'Press to deselect',
   uniqueItemText: 'Only unique values can be added',
   customAddItemText: 'Only values matching specific conditions can be added',
   addItemText: (value: string) => `Press Enter to add <b>"${value}"</b>`,

src/scripts/interfaces/options.ts

@@ -124,6 +124,15 @@ export interface Options {
    */
   maxItemCount: number;
 
+  /**
+   * Whether to render items.
+   *
+   * **Input types affected:** text, text-multiple
+   *
+   * @default true
+   */
+  renderItems: boolean;
+
   /**
    * Control how the dropdown closes after making a selection for select-one or select-multiple
    *
@@ -507,6 +516,15 @@ export interface Options {
    */
   itemSelectText: string;
 
+  /**
+   * The text that is shown when a user hovers over a selected choice. Set to empty to not reserve space for this text.
+   *
+   * **Input types affected:** select-multiple, select-one
+   *
+   * @default 'Press to deselect'
+   */
+  itemDeselectText: string;
+
   /**
    * The text that is shown when a user has focus on the input but has already reached the **max item count** [https://github.com/jshjohnson/Choices#maxitemcount]. To access the max item count, pass a function with a `maxItemCount` argument (see the **default config** [https://github.com/jshjohnson/Choices#setup] for an example), otherwise pass a string.
    *
@@ -601,7 +619,7 @@ export interface Options {
    *       },
    *       choice: (data) => {
    *         return template(`
-   *           <div class="${getClassNames(classNames.item).join(' ')} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId ? 'role="treeitem"' : 'role="option"'}>
+   *           <div class="${getClassNames(classNames.item).join(' ')} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-deselect-text="${this.config.itemDeselectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId ? 'role="treeitem"' : 'role="option"'}>
    *             <span>&bigstar;</span> ${data.label}
    *           </div>
    *         `);

src/scripts/interfaces/templates.ts

@@ -15,6 +15,7 @@ export type TemplateOptions = Pick<
   | 'removeItemLabelText'
   | 'searchEnabled'
   | 'labelId'
+  | 'itemDeselectText'
 >;
 
 export const NoticeTypes = {

src/scripts/templates.ts

@@ -251,6 +251,7 @@ const templates: TemplatesInterface = {
     {
       allowHTML,
       classNames: { item, itemChoice, itemSelectable, selectedState, itemDisabled, description, placeholder },
+      itemDeselectText,
     }: TemplateOptions,
     choice: ChoiceFull,
     selectText: string,
@@ -307,6 +308,9 @@ const templates: TemplatesInterface = {
     if (selectText) {
       div.dataset.selectText = selectText;
     }
+    if (itemDeselectText) {
+      div.dataset.deselectText = itemDeselectText;
+    }
     if (choice.group) {
       div.dataset.groupId = `${choice.group.id}`;
     }

src/styles/choices.scss

@@ -294,13 +294,28 @@ $choices-z-index: 1 !default;
       text-align: right;
     }
   }
+  [data-type*="select-multiple"] & .#{$choices-selector}__item--selectable {
+    &[data-deselect-text] {
+      @media (min-width: 640px) {
+        &.is-selected::after {
+            content: attr(data-deselect-text);
+        }
+      }
+    }
+  }
   .#{$choices-selector}__item--selectable {
     &[data-select-text] {
       @media (min-width: 640px) {
         padding-right: 100px;
 
-        &::after {
+        &.is-selected {
+          background-color: $choices-primary-color;
+          color: #fff;
+        }
+        &:not(.is-selected)::after {
           content: attr(data-select-text);
+        }
+        &::after {
           font-size: $choices-font-size-sm;
           opacity: 0;
           position: absolute;

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

@@ -255,6 +255,24 @@
       describe('selecting choices', () => {
         const selectedChoiceText = 'Choice 1';
 
+        test('shows deselect text on hover of selected choice', async ({ page, bundle }) => {
+            const suite = new SelectTestSuit(page, bundle, testUrl, testId);
+            await suite.startWithClick();
+
+            await suite.choices.first().hover();
+
+            const deselectText = 'Deselect';
+            const afterContent = await page.evaluate(({testId, deselectText}) => {
+                    const choice = document.querySelector(`[data-test-hook=${testId}] .choices__item--choice.is-selected`) as HTMLElement;
+                    choice.dataset.deselectText = deselectText;
+                    return getComputedStyle(choice, ':after').content;
+                },
+                {testId, deselectText},
+            );
+
+            await expect(afterContent).toContain(`\"${deselectText}\"`);
+        });
+
         test('not removing selected choice from dropdown list', async ({ page, bundle }) => {
           const suite = new SelectTestSuit(page, bundle, testUrl, testId);
           await suite.startWithClick();
@@ -284,6 +302,7 @@
           const suite = new SelectTestSuit(page, bundle, testUrl, testId);
           await suite.startWithClick();
 
+          await suite.choices.first().click();
           const count = await suite.choices.count();
 
           for (let i = 1; i < count + 1; i++) {
@@ -330,6 +349,32 @@
       });
     });
 
+    describe('dont-render-selected-items', () => {
+      const testId = 'dont-render-selected-items';
+      describe('selecting choices', () => {
+        test('all available choices', async ({ page, bundle }) => {
+          const suite = new SelectTestSuit(page, bundle, testUrl, testId);
+          await suite.startWithClick();
+
+          await suite.choices.first().click();
+          const count = await suite.choices.count();
+
+          for (let i = 1; i < count + 1; i++) {
+            await suite.expectVisibleDropdown();
+            await suite.getChoiceWithText(`Choice ${i}`).click();
+            await suite.advanceClock();
+            await suite.expectedItemCount(0);
+            if (i < count) {
+              await expect(suite.getChoiceWithText(`Choice ${i}`)).toHaveClass(/is-selected/);
+              await expect(suite.selectableChoices).toHaveCount(count);
+            } else {
+              await suite.expectHiddenNotice();
+            }
+          }
+        });
+      });
+    });
+
     describe('remove button', () => {
       const testId = 'remove-button';
       describe('on click', () => {

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

@@ -73,6 +73,24 @@ describe(`Choices - select one`, () => {
           await expect(suite.items.last()).not.toHaveText('!--');
         });
 
+        test('does not show deselect text on hover of selected choice', async ({ page, bundle }) => {
+            const suite = new SelectTestSuit(page, bundle, testUrl, testId);
+            await suite.startWithClick();
+
+            await suite.choices.first().hover();
+
+            const deselectText = 'Deselect';
+            const afterContent = await page.evaluate(({testId, deselectText}) => {
+                    const choice = document.querySelector(`[data-test-hook=${testId}] .choices__item--choice.is-selected`) as HTMLElement;
+                    choice.dataset.deselectText = deselectText;
+                    return getComputedStyle(choice, ':after').content;
+                },
+                {testId, deselectText},
+            );
+
+            await expect(afterContent).not.toContain(`\"${deselectText}\"`);
+        });
+
         test('does not remove selected choice from dropdown list', async ({ page, bundle }) => {
           const suite = new SelectTestSuit(page, bundle, testUrl, testId);
           await suite.startWithClick();

test/scripts/templates.test.ts

@@ -400,6 +400,7 @@ describe('templates', () => {
     });
 
     const itemSelectText = 'test 6';
+    const itemDeselectText = 'test 7';
 
     let data;
 
@@ -422,10 +423,11 @@ describe('templates', () => {
             class="${getClassNames(choiceOptions.classNames.item).join(' ')} ${getClassNames(
               choiceOptions.classNames.itemChoice,
             ).join(' ')} ${getClassNames(choiceOptions.classNames.itemSelectable).join(' ')}"
-            data-select-text="${itemSelectText}"
             data-choice
             data-id="${data.id}"
             data-value="${data.value}"
+            data-select-text="${itemSelectText}"
+            data-deselect-text="${itemDeselectText}"
             data-choice-selectable
             id="${data.elementId}"
             role="option"
@@ -453,10 +455,11 @@ describe('templates', () => {
             class="${getClassNames(choiceOptions.classNames.item).join(' ')} ${getClassNames(
               choiceOptions.classNames.itemChoice,
             ).join(' ')} ${getClassNames(choiceOptions.classNames.itemDisabled).join(' ')}"
-            data-select-text="${itemSelectText}"
             data-choice
             data-id="${data.id}"
             data-value="${data.value}"
+            data-select-text="${itemSelectText}"
+            data-deselect-text="${itemDeselectText}"
             data-choice-disabled
             aria-disabled="true"
             id="${data.elementId}"
@@ -487,10 +490,11 @@ describe('templates', () => {
             ).join(
               ' ',
             )} ${choiceOptions.classNames.selectedState} ${getClassNames(choiceOptions.classNames.itemSelectable).join(' ')}"
-            data-select-text="${itemSelectText}"
             data-choice
             data-id="${data.id}"
             data-value="${data.value}"
+            data-select-text="${itemSelectText}"
+            data-deselect-text="${itemDeselectText}"
             data-choice-selectable
             id="${data.elementId}"
             role="option"
@@ -520,10 +524,11 @@ describe('templates', () => {
             ).join(
               ' ',
             )} ${choiceOptions.classNames.placeholder} ${getClassNames(choiceOptions.classNames.itemSelectable).join(' ')}"
-            data-select-text="${itemSelectText}"
             data-choice
             data-id="${data.id}"
             data-value="${data.value}"
+            data-select-text="${itemSelectText}"
+            data-deselect-text="${itemDeselectText}"
             data-choice-selectable
             id="${data.elementId}"
             role="option"
@@ -551,10 +556,11 @@ describe('templates', () => {
             class="${getClassNames(choiceOptions.classNames.item).join(' ')} ${getClassNames(
               choiceOptions.classNames.itemChoice,
             ).join(' ')} ${getClassNames(choiceOptions.classNames.itemSelectable).join(' ')}"
-            data-select-text="${itemSelectText}"
             data-choice
             data-id="${data.id}"
             data-value="${data.value}"
+            data-select-text="${itemSelectText}"
+            data-deselect-text="${itemDeselectText}"
             data-group-id="${data.groupId}"
             data-choice-selectable
             id="${data.elementId}"