comboBox dropdowns not working on modal

[karan-lrn]

month and year dropdown not showing the options on click of select over modal.

[karan-lrn]

@evansmwendwa Please help

[priyatham-k]

Along with the comboBox dropdowns month and year, the calendar position is getting fixed at the place of its initial opened position. when the user scrolls it's not moving along with the input field ... PFA

Tech stack using :
"ng2-daterangepicker": "^3.0.1",
"@angular/core": "^15.0.0",
"bootstrap": "^5.2.3",

Note :
Modal z-index : 1000
calendar z-index: 3001

[kesavanpos]

It is a workaround Can you try with below code and let me know how it works for you

import { Component, ElementRef, HostListener, Renderer2, OnInit } from '@angular/core';

@component({
// your component configuration
})
export class YourComponent implements OnInit {
private calendarElement: HTMLElement;

constructor(private el: ElementRef, private renderer: Renderer2) {}

ngOnInit() {
// Find and store a reference to the ng2-daterangepicker calendar element
this.calendarElement = this.el.nativeElement.querySelector('.daterangepicker');

// Initialize or update calendar position when the component is created
this.updateCalendarPosition();

}

@HostListener('window:scroll', [])
onScroll() {
// Update the calendar position when the window is scrolled
this.updateCalendarPosition();
}

private updateCalendarPosition() {
// Ensure that the calendar element is present
if (!this.calendarElement) {
return; // Exit if the calendar element is not found
}

// Obtain a reference to the input field by its ID using Renderer2
const inputField = this.renderer.selectRootElement('#your-input-field-id');

// Ensure that the input field is present
if (!inputField) {
  return; // Exit if the input field is not found
}

// Retrieve the dimensions and position of the input field
const inputRect = inputField.getBoundingClientRect();

// Calculate the top and left positions based on the input field and scroll position
const top = inputRect.top + window.scrollY + inputRect.height;
const left = inputRect.left + window.scrollX;

// Apply the new position to the calendar using Renderer2
this.renderer.setStyle(this.calendarElement, 'top', `${top}px`);
this.renderer.setStyle(this.calendarElement, 'left', `${left}px`);

}
}