feat: add missing requestContentUpdate() method

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

@@ -278,6 +278,14 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    */
   clearCache(): void;
 
+  /**
+   * Requests an update for the content of items.
+   * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
+   *
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   */
+  requestContentUpdate(): void;
+
   addEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,

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

@@ -487,6 +487,18 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     }
   }
 
+  /**
+   * Requests an update for the content of items.
+   * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
+   *
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   */
+  requestContentUpdate() {
+    if (this.$ && this.$.comboBox) {
+      this.$.comboBox.requestContentUpdate();
+    }
+  }
+
   /**
    * Override method inherited from `DisabledMixin` to forward disabled to chips.
    * @protected
@@ -642,7 +654,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     }
 
     // Update selected for dropdown items
-    this.$.comboBox.requestContentUpdate();
+    this.requestContentUpdate();
   }
 
   /** @private */

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

@@ -81,12 +81,6 @@ describe('basic', () => {
       expect(comboBox.hasAttribute('readonly')).to.be.true;
     });
 
-    it('should propagate renderer property to combo-box', () => {
-      const renderer = (root, _, model) => (root.textContent = model);
-      comboBox.renderer = renderer;
-      expect(internal.renderer).to.equal(renderer);
-    });
-
     it('should set itemLabelPath property by default', () => {
       expect(comboBox.itemLabelPath).to.equal('label');
     });
@@ -913,4 +907,68 @@ describe('basic', () => {
       expect(comboBox.invalid).to.be.false;
     });
   });
+
+  describe('renderer', () => {
+    it('should propagate renderer property to combo-box', () => {
+      const renderer = (root, _, model) => {
+        root.textContent = model.item;
+      };
+      comboBox.renderer = renderer;
+      expect(internal.renderer).to.equal(renderer);
+    });
+
+    it('should use renderer when it is defined', () => {
+      comboBox.renderer = (root, _, model) => {
+        const textNode = document.createTextNode(`${model.item} ${model.index}`);
+        root.appendChild(textNode);
+      };
+      comboBox.opened = true;
+
+      const item = document.querySelector('vaadin-multi-select-combo-box-item');
+      expect(item.textContent.trim()).to.equal('apple 0');
+    });
+
+    it('should run renderers when requesting content update', () => {
+      comboBox.renderer = sinon.spy();
+      comboBox.opened = true;
+
+      expect(comboBox.renderer.callCount).to.be.equal(comboBox.items.length);
+
+      comboBox.requestContentUpdate();
+
+      expect(comboBox.renderer.callCount).to.be.equal(comboBox.items.length * 2);
+    });
+
+    it('should not throw if requestContentUpdate() called before opening', () => {
+      expect(() => comboBox.requestContentUpdate()).not.to.throw(Error);
+    });
+
+    it('should not throw if requestContentUpdate() called before attached', () => {
+      const combo = document.createElement('vaadin-multi-select-combo-box');
+      expect(() => {
+        combo.requestContentUpdate();
+      }).to.not.throw(Error);
+    });
+
+    it('should render the item label when removing the renderer', () => {
+      comboBox.renderer = (root, _, model) => {
+        root.textContent = model.item.toUpperCase();
+      };
+      comboBox.opened = true;
+
+      const item = document.querySelector('vaadin-multi-select-combo-box-item');
+      expect(item.textContent).to.equal('APPLE');
+
+      comboBox.renderer = null;
+
+      expect(item.textContent).to.equal('apple');
+    });
+
+    it('should clear the old content after assigning a new renderer', () => {
+      comboBox.opened = true;
+      comboBox.renderer = () => {};
+      const item = document.querySelector('vaadin-multi-select-combo-box-item');
+      expect(item.textContent).to.equal('');
+    });
+  });
 });