jqueryui dialog, select multiple, onclick an element off the screen, wrong element selected

Reproducible code in http://jsfiddle.net/EKL7H/3/

This happens when you create a modal dialog of a certain size.

Inside the dialog create a select multiple, make it such that some part of the select multiple is not visible.

Also you need another control in the dialog, such as an <input>, focus on that input so that the select is not focused.

Now if you try to click on one the select value, jquery dialog will try to scroll, and you will end up clicking on a different value in the select box. Really not a nice user experience. I can't figure out where the scroll happens, help me please.

Also adding the reproducible code here:

<div id="dialog">

<input value="first focus on this line">

line1<br>

line2<br>

line3<br>

line4<br>

line5<br>

<select size=10 multiple>

<option>line 1 - click here, wrong line will be selected</option>

<option>line 2 - click here, wrong line will be selected</option>

<option>line 3 - click here, wrong line will be selected</option>

<option>line 4 - click here, wrong line will be selected</option>

<option>line 5 - click here, wrong line will be selected</option>

<option>line 6 - click here, wrong line will be selected</option>

<option>line 7 - click here, wrong line will be selected</option>

<option>line 8 - click here, wrong line will be selected</option>

<option>line 9 - click here, wrong line will be selected</option>

<option>line 10 - click here, wrong line will be selected</option>

<option>line 11 - click here, wrong line will be selected</option>

<option>line 12 - click here, wrong line will be selected</option>

<option>line 13 - click here, wrong line will be selected</option>

<option>line 14 - click here, wrong line will be selected</option>

<option>line 15 - click here, wrong line will be selected</option>

</select>

</div>

<script>

$('#dialog').dialog({

modal : true,

width : 400,

height : 300

})

</script>