fix(drp): render prefixes and suffixes correctly + test (#1730)

Author: ddaribo

src/components/date-range-picker/date-range-picker-single.spec.ts

@@ -671,6 +671,7 @@ describe('Date range picker - single input', () => {
           content: 'Custom title',
           prerequisite: () => {
             picker.mode = 'dialog';
+            picker.open = true;
           },
         },
         {
@@ -690,6 +691,7 @@ describe('Date range picker - single input', () => {
           slot: 'calendar-icon',
           tagName: 'span',
           content: '^',
+          prerequisite: async () => await picker.hide(),
         },
         {
           slot: 'calendar-icon-open',
@@ -726,6 +728,10 @@ describe('Date range picker - single input', () => {
           testCase.content
         );
         expect(elements[0].tagName.toLowerCase()).to.equal(testCase.tagName);
+
+        const rendered = elements[0].getBoundingClientRect().width > 0;
+        expect(rendered, `Element for slot "${testCase.slot}" is not rendered`)
+          .to.be.true;
       }
     });
   });

src/components/date-range-picker/date-range-picker-two-inputs.spec.ts

@@ -914,6 +914,7 @@ describe('Date range picker - two inputs', () => {
           content: 'Custom title',
           prerequisite: () => {
             picker.mode = 'dialog';
+            picker.open = true;
           },
         },
         {
@@ -933,11 +934,13 @@ describe('Date range picker - two inputs', () => {
           slot: 'calendar-icon-start',
           tagName: 'span',
           content: '^',
+          prerequisite: async () => await picker.hide(),
         },
         {
           slot: 'calendar-icon-end',
           tagName: 'span',
           content: '^-end',
+          prerequisite: async () => await picker.hide(),
         },
         {
           slot: 'calendar-icon-open-start',
@@ -993,6 +996,10 @@ describe('Date range picker - two inputs', () => {
           testCase.content
         );
         expect(elements[0].tagName.toLowerCase()).to.equal(testCase.tagName);
+
+        const rendered = elements[0].getBoundingClientRect().width > 0;
+        expect(rendered, `Element for slot "${testCase.slot}" is not rendered`)
+          .to.be.true;
       }
     });
   });

src/components/date-range-picker/date-range-picker.ts

@@ -254,9 +254,21 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   @queryAssignedElements({ slot: 'prefix' })
   private readonly _prefixes!: HTMLElement[];
 
+  @queryAssignedElements({ slot: 'prefix-start' })
+  private readonly _startPrefixes!: HTMLElement[];
+
+  @queryAssignedElements({ slot: 'prefix-end' })
+  private readonly _endPrefixes!: HTMLElement[];
+
   @queryAssignedElements({ slot: 'suffix' })
   private readonly _suffixes!: HTMLElement[];
 
+  @queryAssignedElements({ slot: 'suffix-start' })
+  private readonly _startSuffixes!: HTMLElement[];
+
+  @queryAssignedElements({ slot: 'suffix-end' })
+  private readonly _endSuffixes!: HTMLElement[];
+
   @queryAssignedElements({ slot: 'actions' })
   private readonly _actions!: HTMLElement[];
 
@@ -582,6 +594,12 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
       .set(escapeKey, this._onEscapeKey);
   }
 
+  protected override createRenderRoot(): HTMLElement | DocumentFragment {
+    const root = super.createRenderRoot();
+    root.addEventListener('slotchange', () => this.requestUpdate());
+    return root;
+  }
+
   protected override firstUpdated() {
     this._setCalendarRangeValues();
     this._delegateInputsValidity();
@@ -1082,8 +1100,13 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
       this._displayFormat!
     );
     const value = picker === 'start' ? this.value?.start : this.value?.end;
-    const prefix = isEmpty(this._prefixes) ? undefined : 'prefix';
-    const suffix = isEmpty(this._suffixes) ? undefined : 'suffix';
+
+    const prefixes =
+      picker === 'start' ? this._startPrefixes : this._endPrefixes;
+    const suffixes =
+      picker === 'start' ? this._startSuffixes : this._endSuffixes;
+    const prefix = isEmpty(prefixes) ? undefined : 'prefix';
+    const suffix = isEmpty(suffixes) ? undefined : 'suffix';
 
     return html`
       <igc-date-time-input

stories/date-range-picker.stories.ts

@@ -628,8 +628,8 @@ export const Slots: Story = {
         ?keep-open-on-outside-click=${args.keepOpenOnOutsideClick}
         ?keep-open-on-select=${args.keepOpenOnSelect}
       >
-        <span slot="prefix-start">$</span>
-        <span slot="suffix-start">🦀</span>
+        <span slot="prefix">$</span>
+        <span slot="suffix">🦀</span>
 
         <span slot="calendar-icon-open-start">👩‍💻</span>
         <span slot="calendar-icon-start">👩‍💻</span>