yearselect and monthselect closing automatically in Firefox

[firlottea]

I have this issue since i've upgraded to Bootstrap 5 that the yearselect and monthselect from " showDropdowns: true" are closing automatically but only in Firefox. Does anyone have a clue why is this happening? I can't seem to find an event that would affect this.

After trying to pinpoint the error. It only happens when it's an input inside a modal

[bhargavhauper]

same issue for me

https://codepen.io/nimesh/pen/zQXOao

[FPI38]

Same issue here on Bootstrap 4 but in the same configuration : inside a modal.
Is there any known fix ?

[cokeito]

dec 2022 - and still same issue !
anyone has fixed or know how to deal with this? or some workaround?

[Kirilldoker]

it helped me when opening the modal
$.fn.modal.Constructor.prototype.enforceFocus = function () {};

 $('#modal').on("show.bs.modal", function (e) { 
     $.fn.modal.Constructor.prototype.enforceFocus = function () {};
 }

[Pescador76]

@Kirilldoker your workaround didn't work for me. Could you explain what you are trying to do? thanks

[bassj]

Here is what fixed this for me, in case anyone in the future encounters this issue.

Bootstrap modals don't like to let you focus elements that it thinks are outside of the modal. By default the popup from the daterangerpicker will be added to the body of the page, which probably won't be inside your modal.

The way to fix this is to set the parentEl parameter on the date picker to be either the modal itself or any element inside the modal.

[Pescador76]

work for me, thank you @bassj

[f1uder]

You can add an attribute to the div .modal
data-focus="false"
This will take the focus away from the modal window. It will not prevent the list from opening (select)