jQuery UI datepicker dynamic width IE9 bug

Question

I'm customizing the jQuery UI datepicker for my needs. One of the things I need is to resize the datepicker to be the same size as the input so I'm doing this:

$input.on('focus keyup', function(){
  $(this).datepicker('widget').width($(this).outerWidth())
})

It works perfect on EVERY browser but IE9. It even works on IE8. What's happening in IE9 becomes obvious as soon as you change month/year with the arrows. As you can see, sometimes the width isn't adjusted and looks weird. It seems random and I'm unable to figure out where is the bug coming from and how to work around it.

DEMO (date field)

Any ideas?

Answer 1

Well, it seems I fixed it with the old setTimeout(f, 1) hack. It works fine now in IE9.

$(this).datepicker({
  onChangeMonthYear: function () {
    // hack to fix ie9 not resizing
    var w = $(this).outerWidth() // cache first!
    setTimeout(function(){
      $(this).datepicker('widget').width(w)
    }, 1)
  }
})