Tabbing is not working in Datepicker

There is an input field accepting the date value and the date picker button is next to it which is created by jquery (because of javascript code i added, please refer the code in the end). If I click on the date picker button, the calendar opens but the cursor sets the focus on the input field instead of going inside the calendar, meaning on press of tab key the focus never goes inside the calendar i.e. i'm unable to navigate inside the calendar using tab key. This started happening since I upgraded jquery version to 3.3.1 and jquery-ui version to 1.12.1. Please see if you can help.

Following is how the input field is defined in the page:

#!text/html
<input id="dateOfBirth" name="dateOfBirth" class="date-format-class" type="text" value=""/>

<script type="text/javascript">
$(document).ready(function(){
  $("#dateOfBirth").datepicker({
    showOn: 'button',
    showButtonPanel: true,
    changeMonth: true,
    changeYear: true,
    buttonImage: '/images/calendar.png',
    maxDate: '0d',
    yearRange: '-99:+0',
    dateFormat: 'mm/dd/yy',
    buttonText: 'Select Date'
  });
});
</script>

Thanks in advance.