I’m using a bootstrap 5 modal to initialize the calendar. Everything works up until I need to add/edit an event. The popup works, but I just can’t type anything in the text fields. I think there’s a conflict somewhere between mobiscroll and bootstrap, just not sure where to look. For now I’m just toggling display block/none between the different content states I have on screen and can enter text into the fields in the popup doing it that way; just doesn’t look as nice.
In case anyone else stumbles upon this, here’s a response I received to my support request that solves the problem:
Thanks for reaching out! Indeed when you are using a bootstrap modal you will need to pass the context option to the mobiscroll popup component. Popup documentation for various frameworks | Mobiscroll
The reason behind this is that, the bootstrap modal wants to keep the focus inside the modal element, but the Mobiscroll Popup component is not rendered inside the modal itself by default, but the body of the page. So when you try to focus an input inside the mobiscroll popup, then the focus tries to leave the bootstrap modal, and the bootstrap modal won’t let that happen.
When passing the context (the id of the modal, or the element itself), the popup will be rendered in that context, so there will be no war for the focus.