Clicking an input inside offcanvas focuses on an input inside a modal

Front End Components Bugs
,
1

Hi,

I have 2 forms, one inside a bootstrap modal and one inside an offcanvas (not bootstrap but self made with css).
I have to open this second form inside the offcanvas while having the bootstrap modal shown.
But when I try to click on an input inside the offcanvas it focusses on an input inside the modal.
This does not happen when the modal is hidden.
I have a small clip for reference.

20240502-0620-59.4932104

edit:
The same thing happens when selecting a date with the jquery ui datepicker inside the modal.
It always sets the focus on that first input “Soort dienst”.

2

If you already have a modal open and want to open an offcanvas try:

  • FIRST toggle the modal and then
  • show the offcanvas
3

Due to the large content inside the modal we have a conditional region inside the modal that loads its content when shown and unloads it when hidden.
So by toggling the modal we would lose al data the user has already filled in to the form that is inside the modal.

Also the offcanvas is not a bootstrap offcavas so there is no javascript involved when showing it.