JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/start/jquery-ui.css">
<div>
    <input id="a1" type="text">
    Date: <span id="a2"></span>
</div>

<div>
    <input id="b1" type="text">
    Other: <span id="b2"></span>
</div>

<input type="text">

JavaScript

/*

Steps:
Using IE 8
Enter the date '10/10/2010' in the first input field (leave date picker visible)
Tab to the next input field

Result:
Nothing is displayed in the div (change event not raised)

Expected Result:
The div should contain the value from the text box (change event raised)


Notes:
The field we are interested in is "Date:", "Other:" is just for verification that change and tabbing is working correctly.


The error seems to be coming from the focus changing during typing in the date box whilst the picker is visible. This happens when the user starts entering the year part of the date.

jQuery.js:1174 (data == '10/10/2')
jQuery.js:2636 (beforeactivate)
jQuery.js:2260 (event.type == 'focus')
...
jQuery-ui.js:7768 (_updateDatepicker, inst.input.focus())
jQuery-ui.js:7651 (_doKeyUp)

*/

$(function () {  
    $('#a1').datepicker ({
        showOn: 'focus',
        buttonText: 'clickme'
    });
    
    $('#a1').change (function () {
        $('#a2').text ($(this).val ());
    })
    
    $('#b1').change (function () {
        $('#b2').text ($(this).val ());
    })
});