feat: add option to always show all chips for selected items (#6515)

Author: web-padawan

packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-container.js

@@ -14,6 +14,10 @@ registerStyles(
       display: flex;
       width: 100%;
     }
+
+    :host([all-chips-visible]) #wrapper {
+      flex-wrap: wrap;
+    }
   `,
   {
     moduleId: 'vaadin-multi-select-combo-box-container-styles',
@@ -49,6 +53,20 @@ class MultiSelectComboBoxContainer extends InputContainer {
     }
     return memoizedTemplate;
   }
+
+  static get properties() {
+    return {
+      /**
+       * Set true to not collapse selected items chips into the overflow
+       * chip and instead always show them, causing input field to grow.
+       * @attr {boolean} all-chips-visible
+       */
+      allChipsVisible: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+    };
+  }
 }
 
 defineCustomElement(MultiSelectComboBoxContainer);

packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.d.ts

@@ -171,6 +171,14 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
 declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
+  /**
+   * Set to true to not collapse selected items chips into the overflow
+   * chip and instead always show them all, causing input field to grow
+   * and wrap into multiple lines when width is limited.
+   * @attr {boolean} all-chips-visible
+   */
+  allChipsVisible: boolean;
+
   /**
    * When true, the user can input a value that is not present in the items list.
    * @attr {boolean} allow-custom-value

packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js

@@ -45,6 +45,14 @@ const multiSelectComboBox = css`
     flex-basis: 0;
     padding: 0;
   }
+
+  :host([all-chips-visible]) #chips {
+    display: contents;
+  }
+
+  :host([all-chips-visible]) [class$='container'] {
+    width: fit-content;
+  }
 `;
 
 registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], {
@@ -177,6 +185,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         >
           <vaadin-multi-select-combo-box-container
             part="input-field"
+            all-chips-visible="[[allChipsVisible]]"
             readonly="[[readonly]]"
             disabled="[[disabled]]"
             invalid="[[invalid]]"
@@ -213,6 +222,19 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
   static get properties() {
     return {
+      /**
+       * Set to true to not collapse selected items chips into the overflow
+       * chip and instead always show them all, causing input field to grow
+       * and wrap into multiple lines when width is limited.
+       * @attr {boolean} all-chips-visible
+       */
+      allChipsVisible: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        observer: '_allChipsVisibleChanged',
+      },
+
       /**
        * Set true to prevent the overlay from opening automatically.
        * @attr {boolean} auto-open-disabled
@@ -674,6 +696,13 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     super._delegateAttribute(name, value);
   }
 
+  /** @private */
+  _allChipsVisibleChanged(visible, oldVisible) {
+    if (visible || oldVisible) {
+      this.__updateChips();
+    }
+  }
+
   /**
    * Setting clear button visible reduces total space available
    * for rendering chips, and making it hidden increases it.
@@ -918,7 +947,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       const chip = this.__createChip(items[i]);
       this.insertBefore(chip, refNode);
 
-      if (this.$.chips.clientWidth > remainingWidth) {
+      // If all the chips are visible, no need to measure remaining width
+      if (!this.allChipsVisible && this.$.chips.clientWidth > remainingWidth) {
         chip.remove();
         break;
       }

packages/multi-select-combo-box/test/chips.test.js

@@ -411,4 +411,54 @@ describe('chips', () => {
       });
     });
   });
+
+  describe('allChipsVisible', () => {
+    let overflow;
+
+    beforeEach(async () => {
+      comboBox.style.width = '250px';
+      await nextResize(comboBox);
+      overflow = getChips(comboBox)[0];
+    });
+
+    it('should not show overflow chip when allChipsVisible is set to true', async () => {
+      comboBox.allChipsVisible = true;
+      comboBox.selectedItems = ['apple', 'banana'];
+      await nextRender();
+      expect(getChips(comboBox).length).to.equal(3);
+      expect(overflow.hasAttribute('hidden')).to.be.true;
+    });
+
+    it('should show overflow chip when allChipsVisible is set to false', async () => {
+      comboBox.allChipsVisible = true;
+      comboBox.selectedItems = ['apple', 'banana'];
+      await nextRender();
+
+      comboBox.allChipsVisible = false;
+      await nextRender();
+      expect(getChips(comboBox).length).to.equal(2);
+      expect(overflow.hasAttribute('hidden')).to.be.false;
+    });
+
+    it('should update chips when allChipsVisible is set after selectedItems', async () => {
+      comboBox.selectedItems = ['apple', 'banana'];
+      await nextRender();
+      expect(getChips(comboBox).length).to.equal(2);
+      expect(overflow.hasAttribute('hidden')).to.be.false;
+
+      comboBox.allChipsVisible = true;
+      await nextRender();
+      expect(getChips(comboBox).length).to.equal(3);
+      expect(overflow.hasAttribute('hidden')).to.be.true;
+    });
+
+    it('should wrap chips and increase input field height if chips do not fit', async () => {
+      const inputField = comboBox.shadowRoot.querySelector('[part="input-field"]');
+      const height = inputField.clientHeight;
+      comboBox.allChipsVisible = true;
+      comboBox.selectedItems = ['apple', 'banana', 'lemon', 'orange'];
+      await nextRender();
+      expect(inputField.clientHeight).to.be.greaterThan(height);
+    });
+  });
 });

packages/multi-select-combo-box/test/typings/multi-select-combo-box.types.ts

@@ -105,6 +105,7 @@ assertType<string | null | undefined>(narrowedComboBox.label);
 assertType<boolean>(narrowedComboBox.required);
 assertType<string>(narrowedComboBox.overlayClass);
 assertType<boolean>(narrowedComboBox.groupSelectedItems);
+assertType<boolean>(narrowedComboBox.allChipsVisible);
 
 // Mixins
 assertType<ControllerMixinClass>(narrowedComboBox);

packages/multi-select-combo-box/test/visual/lumo/multi-select-combo-box.test.js

@@ -120,6 +120,22 @@ describe('multi-select-combo-box', () => {
     });
   });
 
+  describe('all chips visible', () => {
+    beforeEach(() => {
+      element.selectedItems = [...element.items];
+      element.allChipsVisible = true;
+    });
+
+    it('all chips visible', async () => {
+      await visualDiff(div, 'all-chips-visible');
+    });
+
+    it('all chips visible max width', async () => {
+      element.style.maxWidth = '250px';
+      await visualDiff(div, 'all-chips-visible-max-width');
+    });
+  });
+
   describe('opened', () => {
     beforeEach(() => {
       div.style.height = '200px';

packages/multi-select-combo-box/test/visual/lumo/screenshots/multi-select-combo-box/baseline/all-chips-visible-max-width.png

@@ -120,6 +120,22 @@ describe('multi-select-combo-box', () => {
     });
   });
 
+  describe('all chips visible', () => {
+    beforeEach(() => {
+      element.selectedItems = [...element.items];
+      element.allChipsVisible = true;
+    });
+
+    it('all chips visible', async () => {
+      await visualDiff(div, 'all-chips-visible');
+    });
+
+    it('all chips visible max width', async () => {
+      element.style.maxWidth = '250px';
+      await visualDiff(div, 'all-chips-visible-max-width');
+    });
+  });
+
   describe('opened', () => {
     beforeEach(() => {
       div.style.height = '200px';

packages/multi-select-combo-box/test/visual/lumo/screenshots/multi-select-combo-box/baseline/all-chips-visible.png

@@ -48,6 +48,16 @@ registerStyles(
   { moduleId: 'lumo-multi-select-combo-box-overlay' },
 );
 
+registerStyles(
+  'vaadin-multi-select-combo-box-container',
+  css`
+    :host([all-chips-visible]) {
+      padding-block: var(--lumo-space-xs);
+    }
+  `,
+  { moduleId: 'lumo-multi-select-combo-box-container' },
+);
+
 const multiSelectComboBox = css`
   :host([has-value]) {
     padding-inline-start: 0;
@@ -67,10 +77,18 @@ const multiSelectComboBox = css`
     mask-image: none;
   }
 
+  :host([all-chips-visible]) ::slotted([slot='chip']) {
+    margin-block: calc(var(--lumo-space-xs) / 2);
+  }
+
   ::slotted([slot='chip']:not([readonly]):not([disabled])) {
     padding-inline-end: 0;
   }
 
+  :host([all-chips-visible]) ::slotted([slot='input']) {
+    min-height: calc(var(--lumo-text-field-size, var(--lumo-size-m)) - 2 * var(--lumo-space-xs));
+  }
+
   ::slotted([slot='chip']:not(:last-of-type)),
   ::slotted([slot='overflow']:not(:last-of-type)) {
     margin-inline-end: var(--lumo-space-xs);

packages/multi-select-combo-box/test/visual/material/multi-select-combo-box.test.js

@@ -56,6 +56,11 @@ const multiSelectComboBox = css`
     padding: 0 0.5rem;
   }
 
+  :host([all-chips-visible]) ::slotted([slot='chip']) {
+    margin-top: 0.25rem;
+    align-self: flex-start;
+  }
+
   ::slotted([slot='chip']:not([readonly]):not([disabled])) {
     padding-inline-end: 0;
   }