Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#9714 closed bug (notabug)

Infinite focus/blur loop when clicking on auto selectable input which is above a modal

Reported by: Petah Owned by: Petah
Priority: minor Milestone: none
Component: ui.dialog Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:

Description

I have a case where I have an input that sits on top of everything on a page.

The input has a script that auto selects all the text in it when it is focused.

However when I open a jQuery UI dialog the browser is put into an infinite focus/blur loop.

Anyway to prevent this happening? Or am I doing anything wrong?

HTML:

<div class="dialog">I am a dialog</div> <input id="input" value="Click on me then look in your console" />

JS:

$('.dialog').dialog({

modal: true

});

var blur = 0; var focus = 0;

$('#input').on('focus', function() {

focus++; console.log('focus #'+focus); var inp = this; setTimeout(function() {

inp.select();

}, 1);

});

$('#input').on('blur', function() {

blur++; console.log('blur #'+blur);

});

CSS:

#input {

position: relative; z-index: 5000; border: 2px solid red; width: 400px;

}

http://jsfiddle.net/3XB8L/2/

Change History (6)

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

Owner: set to Petah
Status: newpending

Anyway to prevent this happening?

Don't allow the input to be visible while the modal dialog is open. Why do you want this behavior in the first place?

comment:2 Changed 9 years ago by Petah

Status: pendingnew

For example a site management sidebar that is supposed to sit on top of everything.

Last edited 9 years ago by Petah (previous) (diff)

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

Status: newpending

But why would it be visible while a modal dialog is open?

comment:4 Changed 9 years ago by Petah

Status: pendingnew

For a hypothetical example in the phpMyAdmin interface, I want the modal dialog to obscure the main content pane, but allow the user to use the sidebar to navigate between tables, and still have logout buttons etc available for use. Kinda like it worked when phpMyAdmin used a frameset.

Just a FYI this is stemmed from an issue reported to a project I maintain so my usecase is totally hypothetical.

https://github.com/PANmedia/raptor-editor/issues/112

Also note this issue was not present in 1.9.2 according to

http://stackoverflow.com/questions/20643933/jquery-ui-infinite-loop-when-clicking-on-auto-selectable-input-which-is-above-a

comment:5 Changed 9 years ago by Scott González

Resolution: notabug
Status: newclosed

I want the modal dialog to obscure the main content pane, but allow the user to use the sidebar to navigate between tables

We don't support partial page modality. But if you really want to do this, see #9087.

comment:6 Changed 9 years ago by Petah

Understandable that you don't support it, but I still think causing an infinite loop is not acceptable.

Note: See TracTickets for help on using tickets.