Redactor - елементи вводу в діалоговому вікні "Вставити посилання" не можуть отримати фокус - jquery-ui, jquery-ui-dialog, redactor, redactor.js

Я намагаюся зробити щось подібне ця сторінка робить.

Різниця лише в тому, що діалогове вікно jQuery UI, яке я використовую, є модальним.

Я спробував редагувати скрипт на сторінці, щоб зробити діалоговим вікном jQuery UI.

$("#dialog-modal").dialog(
{
modal: true, // added this line to make dialog modal
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $("<textarea style="height: 276px;">");
$(textarea).redactor({
focus: true,
maxHeight: 300,
initCallback: function()
{
this.code.set("<p>Lorem...</p>");
}
});
}
});

Потім я натиснув на вставити посилання кнопку (третя кнопка праворуч на панелі інструментів). Це показує інший модальний діалог JQuery UI з формою.

Я помітив, що я не можу отримати фокус текстових полів. Я не можу ввести в них нічого.

Код працює нормально, якщо я не роблю перший модальний діалог.

Будь-яка ідея, як обійти це?

Відповіді:

Я зіткнувся з тією ж проблемою. Така поведінка є результатом обробки інтерфейсу jQuery focusin.dialog подія на документі і повернення фокусу до останнього діалогового вікна jQuery UI у стеку (за допомогою перемикача ".ui-dialog:visible:last"). Я вирішив проблему, назвавши цей код відразу після мого модального діалогового вікна:

setTimeout(function() {
$(document).unbind("focusin.dialog");
}, 100);

я використав setTimeout, оскільки jQuery UI також використовує setTimeout , щоб зв'язати цю подію. Я зміг це виправити завдяки цій відповіді: JQuery UI Focus Stealing. Я також спробував оновити jQuery UI 1.11.4, але це не вирішує проблему.