Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#9171 closed bug (notabug)

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>

Change History (3)

comment:1 Changed 7 years ago by Scott González

Resolution: notabug
Status: newclosed

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

comment:2 Changed 7 years ago by mpermana

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

comment:3 Changed 7 years ago by Scott González

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

Note: See TracTickets for help on using tickets.