EjsMultiSelect doesn't work inside Bootstrap 4 Modal

[Bishan Moteria]

Hello,

I'm having issue using EjsMultiSelect (VisualMode.CheckBox) inside Bootstrap 4 modal. The dropdown menu shows for a sec and then disappears. I have tested the below code outside of modal and it works. Please note that it doesn't work only when Mode is set to "VisualMode.CheckBox".

Can we please have a solution?

Razor Component:

Thanks,

Bishan M.

[Saranya Dhayalan]

Hi Bishan,

Thanks for contacting us. 

 

We have validated the reported issue in our end. It occurs due to the bootstrap modal enforcing the focus, when an element which is not a child of bootstrap modal gets focused. Kindly refer to the following online blogs for further reference.  

  

Link 1: https://github.com/sweetalert2/sweetalert2/issues/374    

Link 2: https://github.com/twbs/bootstrap/issues/19971    

  

This issue can be resolved this issue by unbinding the focusin modal event in show modal event as per the suggestion given in the above blogs.  

  

<script type="text/javascript">  

    $(function () {  

        $('#modalMSDDL').on('shown.bs.modal', function () {  

            $(document).off('focusin.modal');  

        });  

    })  

</script>  

  

 

Please find the modified sample in the following link  

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/149849/ze/BlazorApp51742277149 

 

Please let us know if you need any further assistance on this. 

Regards, 

Saranya D 

[Bishan Moteria]

Hi Saranya,

Thank you for the solution and online blog reference links. The VisualMode.CheckBox mode now works inside the modal after unbinding the focusin modal event.

Bishan M.

[Saranya Dhayalan]

Hi Bishan 

 

Most Welcome.  

 

Please let us know, if you need any further assistance on this.  

 

Regards, 

Saranya D