Skip to main content

Search and Top Navigation

#4529 closed bug (fixed)

Opened May 12, 2009 04:16PM UTC

Closed July 30, 2010 12:57AM UTC

Last modified November 19, 2010 06:26PM UTC

dialog buttons are accessed in wrong order using tab

Reported by: mijobe Owned by:
Priority: major Milestone: 1.8.3
Component: ui.dialog Version: 1.7.1
Keywords: dialog button order Cc:
Blocked by: Blocking:

dialog buttons are are accessible via tab from right to left, this is confusng because its against the normal european read direction from left to right


Attachments (0)
Change History (11)

Changed May 13, 2009 08:24AM UTC by jzaefferer comment:1

milestone: TBD1.8

Changed August 29, 2009 03:22PM UTC by ZeekDaGeek comment:2

This is related to the theme you are using, each button has the CSS property "float:right".


Check for this float property and process the button JSON Array forwards or backwards based on that property.

This is an aesthetics thing more then a major problem, and would only really come up if the site has 2 themes, one that floats right, and one that doesn't or if someone forces another UI theme. It would cause unnatural or unfamiliar button order.

My current solution is to just write the button JSON Array backwards.

Changed September 14, 2009 08:33PM UTC by mvermilion comment:3

Got a request (aka bug report) from my customers on this issue. I am declaring the following styles in my override stylesheet for jQuery UI. If you do this, you will need to declare the buttons in the natural order, to take advantage of the natural tab order. The consequence of this is the difference in positioning control between a block-level and an inline element. I think it's worth it to have the correct tab order, especially when my customers are complaining.

.ui-dialog .ui-dialog-buttonpane{text-align:right;}

.ui-dialog .ui-dialog-buttonpane button{float:none;}

Changed July 30, 2010 12:57AM UTC by scottgonzalez comment:4

resolution: → fixed
status: newclosed

Fixed in 61e0aea.

Changed August 04, 2010 01:19AM UTC by scottgonzalez comment:5


Changed November 03, 2010 10:14AM UTC by snoofer comment:6

It real cool that this bug is finally fixed. However, it was open for more than 15 months! So out there a lot of projects which just lived with this bug and wrote the "wrong" order.

After you fixed this issue these projects are broken and need to be adjusted. Otherwise there are not able to upgrade to a new version. This is very bad! Since it cost time and money at no reason.

Could you please consider to add an global backward compatibility switch which will restore the old behavior? It would be a timesaver to many developer.

Changed November 03, 2010 12:09PM UTC by scottgonzalez comment:7

We won't add an extra flag/option to bring back to the old behavior. You can probably do that on your own if you want. Going forward we won't make backward incompatible changes in minor releases.

Changed November 06, 2010 03:37PM UTC by snoofer comment:8

Don't take me wrong but you exactly did this! You did an incompatible change in a minor release. Before Version 1.8.3 the behavior was different.

Ok .... it was a bug which need to be fixed. However it took 15 months! So you can not expect that no one out there is not using it in the "wrong" way. The workaround of the bug was simple: Just use an other order. Nothing a developer really cares about.

So if I like to update to a newer version of jquery.ui I need to change hundreds of lines to bring back the "old" order (in several large projects). Of course with the option to break something in my code. Or I need to maintain my on version. Both are not really good options.

So please think about it again. Thanks.

Changed November 08, 2010 02:07PM UTC by scottgonzalez comment:9

You can just modify your CSS. This will reverse the order of the buttons, going back to the old order:

.ui-dialog .ui-dialog-buttonpane button { float: right; }

Changed November 09, 2010 11:52AM UTC by snoofer comment:10

Oh Yeah! You are so right! Thanks a lot for the hint. I totally forgot about the css option.

Changed November 19, 2010 06:26PM UTC by Scott González comment:11

Dialog: Wrap buttons in a div so we can float the div instead of the individual buttons. Fixes #4529 - dialog buttons are accessed in wrong order using tab.

Changeset: 61e0aeac7e626df711e7066f27b652602387b784