Skip to main content

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.

StackOverflow discussion

Attachments (1)
Change History (21)

Changed August 02, 2009 04:31AM UTC by scottgonzalez comment:1

milestone: TBD1.8
summary: Add option to dialog to prevent auto-focus of first tabbable elementAdd option to set which element gains focus on open
type: bugenhancement

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.

Changed September 29, 2009 12:44PM UTC by htrex 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 November 13, 2009 07:34PM UTC by scottgonzalez comment:3

Depends on #4957.

Changed June 24, 2010 05:38PM UTC by ajcrews 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 ajcrews comment:5

Changed June 24, 2010 06:52PM UTC by ajcrews comment:6

Changed January 05, 2011 04:38PM UTC by scottgonzalez comment:7

#6811 is a duplicate of this ticket.

Changed June 30, 2011 09:15AM UTC by PlanetPratt 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 scottgonzalez comment:9

Nothing has been lost. You'll notice this ticket is still open.

Changed June 30, 2011 07:13PM UTC by PlanetPratt 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 scottgonzalez comment:11

That seems reasonable.

Changed September 07, 2011 12:42PM UTC by scottgonzalez comment:12

keywords: dialog focusredesign

Changed June 26, 2012 01:22AM UTC by scottgonzalez comment:13

type: enhancementfeature

Changed October 11, 2012 02:47PM UTC by scottgonzalez comment:14

milestone: 1.9.01.10.0

Changed October 16, 2012 01:47PM UTC by petersendidit comment:15

status: newopen
summary: Add option to set which element gains focus on openDialog: Add option to set which element gains focus on open

Changed October 23, 2012 02:41PM UTC by bolerao 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 Jörn Zaefferer comment:17

resolution: → fixed
status: openclosed

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 Ult Combo 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 scottgonzalez comment:19

Replying to [comment:18 Ult Combo]:

Sorry, but where is the feature to disable the autofocus behavior completely which has been asked for in this ticket?

Go read comment #1 again...

Changed May 30, 2013 09:07PM UTC by rcollette 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 tj.vantoll 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.