I'm working with a daterangepicker from metronic that is displayed in a modal, when I run my application on Chrome or Edge the input works fine, but when running it on FirexFox the month and year dropdown won't work, and it only happends with modals.
Here's the element:
`<div class="col-md-6">
<div class="form-group input-group-sm col-md-12 datepicker-group">
<label class="control-label" for="calendar">Fecha:</label>
<span class="bootstrap-icons" aria-hidden="true"></i></span>
<div class="input-group input-group-sm mb-2">
<span class="input-group-text" id="idFecha"><i class="fa fa-calendar fs-4"></i></span>
<input id="Fecha" asp-for="Fecha" class="form-control" type="text" aria-describedby="fecha">
</div>
</div>
</div>`
And here's the configuration for the element:
$("#Fecha").daterangepicker({
singleDatePicker: true,
changeMonth: true,
changeYear: true,
showDropdowns: true,
minYear: 1901,
maxYear: parseInt(moment().format("YYYY"), 12),
maxDate: new Date(),
autoApply: true,
daysOfWeekDisabled: [0, 6],
locale: {
format: 'DD/MM/YYYY',
applyLabel: 'Aplicar',
cancelLabel: 'Cancelar',
daysOfWeek: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
weekLabel: "S"
}
});
So far the option list shows but very friefly and immediately disappears.