Search and Top Navigation
#4731 closed feature (fixed)
Opened July 29, 2009 11:10PM UTC
Closed November 26, 2012 09:30AM UTC
Last modified May 31, 2013 01:59AM UTC
Dialog: Add option to set which element gains focus on open
| Reported by: | slolife | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.10.0 |
| Component: | ui.dialog | Version: | 1.7.2 |
| Keywords: | redesign | Cc: | |
| Blocked by: | Blocking: |
Description
I have a jQuery UI dialog whose first tabbable element is an input textbox which is also a datepicker textbox.
So, when a user clicks on a link to open the dialog, the dialog UI code automatically sets the focus to the first element, which, in my case, triggers the datepicker widget to display as well. It is very confusing to the user.
Please add a config option to the dialog widget to disable the auto-focus feature if desired.
Attachments (1)
Change History (21)
Changed August 02, 2009 04:31AM UTC by comment:1
| milestone: | TBD → 1.8 |
|---|---|
| summary: | Add option to dialog to prevent auto-focus of first tabbable element → Add option to set which element gains focus on open |
| type: | bug → enhancement |
Changed September 29, 2009 12:44PM UTC by comment:2
On some application contexts I've a jQuery UI dialog that is shown automatically when the user selects some text.
If focus is changed automatically in any way the selection is immediately lost, that's not the application intended behaviour.
I agree too, Please add a config option to disable the auto-focus feature if desired.
Changed June 24, 2010 05:38PM UTC by comment:4
Dialog: Added "focusSelector" option which will be used to focus the desired element when the dialog is opened. Fixed #4731 - Add option to set which element gains focus on open.
Change located at: http://github.com/ajcrews/jquery-ui/commit/e4e5c297fc63943d745fdc4a3fef2394f025b2ac
#5767 is also bundled into that commit.
Changed June 24, 2010 06:49PM UTC by comment:5
Changed June 24, 2010 06:52PM UTC by comment:6
Sorry, wrong link to Final version: http://github.com/ajcrews/jquery-ui/commit/405574d93211e2a419062ac0e39cbf9baefc79a8
Changed June 30, 2011 09:15AM UTC by comment:8
Has this update been lost? I've checked both 1.8.7 and 1.8.14 and neither appear to contain this fix.
(*Chris*)
Changed June 30, 2011 11:40AM UTC by comment:9
Nothing has been lost. You'll notice this ticket is still open.
Changed June 30, 2011 07:13PM UTC by comment:10
Since the ticket is still open, is there any way that the first fallback (if the focusSelector isn't specified) could be to look for the element with the lowest tabindex? That would blend in nicely with standard HTML syntax.
(*Chris*)
Changed June 30, 2011 07:19PM UTC by comment:11
That seems reasonable.
Changed September 07, 2011 12:42PM UTC by comment:12
| keywords: | dialog focus → redesign |
|---|
Changed June 26, 2012 01:22AM UTC by comment:13
| type: | enhancement → feature |
|---|
Changed October 11, 2012 02:47PM UTC by comment:14
| milestone: | 1.9.0 → 1.10.0 |
|---|
Changed October 16, 2012 01:47PM UTC by comment:15
| status: | new → open |
|---|---|
| summary: | Add option to set which element gains focus on open → Dialog: Add option to set which element gains focus on open |
Changed October 23, 2012 02:41PM UTC by comment:16
There should be a simple option to just display the content and stay on top without automatic scrolling at all. Without a need to specify an "element" (tabbable element?). In the case I encountered this problem I just have a few links spread over the dialog content that are not intended to be clicked at all. It's variable content for debugging purposes that, by chance, includes fully qualified a href's. It drives me mad that the dialog scrolls down to them instead of staying on top. Each time I open the dialog I have to scroll it up. Similarly, another case might be that I use the dialog as a help dialog and provide information and then some links to more information. There is no reason to believe that the dialog should scroll down to the links, so that the reader cannot read parts of the help text anymore and has to actively scroll up.
see example in http://bugs.jqueryui.com/ticket/8719
Changed November 26, 2012 09:30AM UTC by comment:17
| resolution: | → fixed |
|---|---|
| status: | open → closed |
Dialog: Extend autofocus, starting with [autofocus], then :tabbable content, then buttonpane, then close button, then dialog. Fixes #4731 - Dialog: Add option to set which element gains focus on open
Changeset: b27db7e3b9a857b8f0890e91ae9c8a2d33bf9919
Changed April 20, 2013 10:37PM UTC by comment:18
Sorry, but where is the feature to disable the autofocus behavior completely which has been asked for in this ticket?
In UI 1.10.2 I'm working around it with:
$.ui.dialog.prototype._focusTabbable = function(){};
Changed April 21, 2013 01:11AM UTC by comment:19
Changed May 30, 2013 09:07PM UTC by comment:20
Can someone explain why auto focusing on the first link provides accessibility? I have a dialog whose content comes from a content management system. Having to explain to the users that they have to insert a dummy hidden link in their content to prevent the dialog from scrolling down through the content is not user friendly. Sure I can prepend the content retrieved from the CMS with a link as well but this seems kludgy.
Changed May 31, 2013 01:59AM UTC by comment:21
Replying to [comment:20 rcollette]:
Can someone explain why auto focusing on the first link provides accessibility? I have a dialog whose content comes from a content management system. Having to explain to the users that they have to insert a dummy hidden link in their content to prevent the dialog from scrolling down through the content is not user friendly. Sure I can prepend the content retrieved from the CMS with a link as well but this seems kludgy.
It's not necessarily the first link, per the code itself it's actually...
Set focus to the first match:
1. First element inside the dialog matching [autofocus]
2. Tabbable element inside the content element
3. Tabbable element inside the buttonpane
4. The close button
5. The dialog itself
Screen readers will announce when focus changes. If focus does not change when a dialog is opened then screen reader users will not know that it happened.
There are easier ways to prevent the dialog from scrolling than including a hidden link, see http://jsbin.com/icuguz/12/edit. There's a ticket open to prevent the scrolling you're referring to: http://bugs.jqueryui.com/ticket/6006. We'd be happy to review a pull request.
The option should let you set which element gains focus on open. If the specified element can't be found, the .ui-dialog element should be given focus. Not setting focus within the dialog would create an accessibility problem.