Skip to main content

Search and Top Navigation

#9171 closed bug (notabug)

Opened March 21, 2013 05:22AM UTC

Closed March 21, 2013 12:31PM UTC

Last modified March 21, 2013 02:04PM UTC

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

Reported by: mpermana Owned by:
Priority: minor Milestone: none
Component: ui.dialog Version: 1.10.2
Keywords: Cc:
Blocked by: Blocking:
Description

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>

Attachments (0)
Change History (3)

Changed March 21, 2013 12:31PM UTC by scottgonzalez comment:1

resolution: → notabug
status: newclosed

That's the browser, not jQuery UI: http://jsfiddle.net/EKL7H/4/

Changed March 21, 2013 02:01PM UTC by mpermana comment:2

Thank you for finding the real cause, any idea how to work around the browser bug?

Changed March 21, 2013 02:04PM UTC by scottgonzalez comment:3

Design your UI so that the multi-select isn't scrolled? You'll need to ask for help on the forums or Stack Overflow.