Datepicker flashes and disappears after field receives focus

I have an html page that displays a modal dialog with two jquery datepicker fields. When the dialog is instantiated, the cursor is properly placed in the first datepicker field and the calendar is displayed.

Upon selection of a date, focus is moved to the second datepicker field. The calendar flashes but disappears.

How do I correct this?

The code is below. I have added no html formatting, so when the code runs it will be ugly. Pick a date and you will see the date picker calendar, for the to date field, display and disappear.

Any help would be greatly appreciated.

<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="./javascript/jquery-ui.min.js"></script>

<!-- include needed javascript libraries -->
<script defer src="./javascript/jquery.ba-throttle-debounce.min.js"></script>

<!-- main script -->
<script defer>

$(document).ready(function() {
    
    // set start and end dates to read only
    $('#fromdate').prop('readonly', true);
    $('#todate').prop('readonly', true);
    
    // display the dialog to enter the date range   
    $("#fromdate").datepicker();
    $("#todate").datepicker();
    $("#mtg_dialog").dialog({modal:true, draggable:false, resizable:false});
        
    // process the selection of the from date
    $('#fromdate').on('change', function() {
        if ($('#fromdate').datepicker('getDate') != null) {
            $('#todate').focus();
        }
    });
    
    // input button
    $('input[type=button]').hover(function() {
        $(this).toggleClass('ui-state-hover');
    });
    
    // place the cursor in the from date field
    $("#fromdate").focus();
    
    /* 
    Run Report Button
    */
    $('#run_btn').on('click', function() {
        console.log('run report');
    });
    
});

</script>


<!-- HTML -->
<div id="mtg_dialog" style="display:none">
    <div>
        <div>
            <input type="datepicker" placeholder="from date" id="fromdate" tabindex="1"/>
            <br>
            <br>
            <input type="datepicker" placeholder="to date" id="todate" tabindex="2"/>
        </div>
        <br>
        <br>
        <div>
            <input type="button" value="Run" id="run_btn" tabindex="3"/>
        </div>
            <input type="button" value="Cancel" id="cancel_btn" tabindex="4"/>
        </div>
    </div>
</div>

Answer

you can fix it by delaying the focus event like this:

setTimeout(() => $('#todate').focus());