Not being able to filter in a Modal form

[Alexandre]

Hello,

I have a Dropdown Tree control in a Modal form, and I am not being able to write anything in the filter. What could be happening?

[Vishwanathan Muruganantham]

Hi Alexandre,

Greetings from Syncfusion support.

We have reviewed your query and understand that the filter input in the Dropdown Tree is not focusable when used within a modal. We have prepared a sample based on your requirements. We suspect that the issue occurs because the Bootstrap modal enforces focus on elements that are not children of the modal. 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 by adding data-bs-focus="false" to the modal HTML. This will allow us to focus the Dropdown Tree filter.

Refer to the below code snippet for reference.

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" data-bs-focus="false" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

….

Please check the sample and let us know if you need any further assistance.

Sample: attached as zip file.

Best Regards,
Vishwanathan

Attachment: ModalDDT_639585ff.zip

[Alexandre]

Hello  Vishwanathan,

That was just what I needed, thank you very much

Regards

[Kalpana Ganesan]

Hi Alexandre,

You're welcome! Glad that the provided solution was helpful. If you have any other questions, please reach out to us, we will be happy to help you.

Regards,

Kalpana.