Focus not working in jQuery UI 1.10 with modal dialog #940

Closed
wok opened this Issue Feb 26, 2013 · 8 comments

Comments

Projects
None yet
8 participants
@wok

wok commented Feb 26, 2013

When creating a modal dialog, the input field which select2 creates cannot be focused.
Works normally with jQuery UI 1.9.

Screen Shot 2013-02-26 at 20 10 43

The reason seems to be a changed behavior in jQuery UI dialog which now discards all focus events on elements which are not part of a dialog ( ui.dialog function _createOverlay. )

I could fix this temporarily by adding a custom CSS class to the drop down:

$("select").select2( { dropdownCssClass: 'ui-dialog' } );

However this does not feel like a permanent solution.

Example: https://gist.github.com/wok/5040447

@fonini

This comment has been minimized.

Show comment
Hide comment
@fonini

fonini Feb 28, 2013

Same issue here.

fonini commented Feb 28, 2013

Same issue here.

@ivaynberg

This comment has been minimized.

Show comment
Hide comment
@ivaynberg

ivaynberg Feb 28, 2013

Contributor

dont think there is anything i can do about it on my side...

Contributor

ivaynberg commented Feb 28, 2013

dont think there is anything i can do about it on my side...

@ivaynberg ivaynberg closed this Feb 28, 2013

@jbyers

This comment has been minimized.

Show comment
Hide comment
@jbyers

jbyers May 7, 2013

There is a facility in jQuery-UI 1.10.2 for registering outside elements to receive focus in the dialog: http://bugs.jqueryui.com/ticket/9087

jbyers commented May 7, 2013

There is a facility in jQuery-UI 1.10.2 for registering outside elements to receive focus in the dialog: http://bugs.jqueryui.com/ticket/9087

@ivaynberg

This comment has been minimized.

Show comment
Hide comment
@ivaynberg

ivaynberg May 7, 2013

Contributor

also see #1246

Contributor

ivaynberg commented May 7, 2013

also see #1246

@hmnshuagarwal

This comment has been minimized.

Show comment
Hide comment
@hmnshuagarwal

hmnshuagarwal Sep 2, 2015

Thanks @wok your solution works for me!!

Thanks @wok your solution works for me!!

@vmarcelo

This comment has been minimized.

Show comment
Hide comment
@vmarcelo

vmarcelo Nov 13, 2015

Thanks @wok your solution works for me!!

Note: use select2 version 3.4.5

Thanks @wok your solution works for me!!

Note: use select2 version 3.4.5

@ganholete

This comment has been minimized.

Show comment
Hide comment
@ganholete

ganholete Nov 26, 2015

@wok solution not worked for me, but work just add this in dialog init:

open: function () {
  $.ui.dialog.prototype._allowInteraction = function (e) {
  if ($(e.target).closest('.select2-drop').length) return true;
    return ui_dialog_interaction.apply(this, arguments);
  };
  $.ui.dialog.prototype._allowInteractionRemapped = true;
},
_allowInteraction: function (event) {
  return !!$(event.target).is(".select2-input") || this._super(event);
}

@wok solution not worked for me, but work just add this in dialog init:

open: function () {
  $.ui.dialog.prototype._allowInteraction = function (e) {
  if ($(e.target).closest('.select2-drop').length) return true;
    return ui_dialog_interaction.apply(this, arguments);
  };
  $.ui.dialog.prototype._allowInteractionRemapped = true;
},
_allowInteraction: function (event) {
  return !!$(event.target).is(".select2-input") || this._super(event);
}
@brutaldesign

This comment has been minimized.

Show comment
Hide comment

@ganholete Thanks a ton!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment