Autocomplete Focus on bootstrap 4 modal dialog

[Pratura]

Hi,

I can't focus the Autocomplete control with the usual methods:

<div class="modal fade" id="ContractsDialog" role="dialog">

    <div class="modal-dialog modal-dialog-centered modal-sm h-100 d-flex flex-column justify-content-center my-0" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">Contracts</h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    <span aria-hidden="true">&times;</span>

                </button>

            </div>

            <div class="modal-body">

                <input type="text" id="ContractNumber" /><br />

                <button type="button" class="btn btn-success btn-block btn-sm">Save</button>

            </div>

        </div>

    </div>

</div>

function addContract() {

$("#ContractsDialog").modal();

$("#ContractNumber").ejAutocomplete({

            showEmptyResultText: false,

            showRoundedCorner: true,

            width: "100%",

            autoFocus: true,

            create: function () { this.element.focus(); }

});

$(function () {

       $("#ContractNumber2").prev().focus();

})

}

[Selvamani Sankarappan]

Hi Pratura,   

  

Thanks for contacting Syncfusion Support.   

  

We were able to reproduce the reported issue at our end. The Autocomplete focus is lost due to the bootstrap modal. To overcome this issue, need to add the focus method on bootstrap modal open event. Please refer to the following code example:   

  

<script>   

    $(function () {   

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

            $('#ContractNumber').focus();   

        });   

    });   

    function addContract() {   

        $("#ContractsDialog").modal();   

        $("#ContractNumber").ejAutocomplete({   

            showEmptyResultText: false,   

            showRoundedCorner: true,   

            width: "100%",   

            autoFocus: true   

        });   

    }   

    </script>   

  

Please refer to the following sample:   

https://jsplayground.syncfusion.com/4fyibsnt   

  

Please refer to the following reference link:   

https://stackoverflow.com/questions/33970707/how-to-prevent-lost-focus-in-bootstrap-modal   

  

Please let us know if you need any further assistance.   

  

Regards,   

  

Selvamani S.