2015-05-14 5 views
2

Я знаю проблему с модальным окном jQueryUI и Select2. Я использую это исправление https://github.com/select2/select2/issues/1246#issuecomment-71710835. Но в настоящее время я пытаюсь интегрировать Select2 с jqGrid и его модальным окном редактирования, и я заметил, что поле ввода теряет фокус на keydown и текст не вводится. Я использую последнюю версию Select2 v4.0.0.Select2 v4 in jqGrid edit modal window issue

  1. Нажал на выбор2 - список открыт и вход имеет фокус
  2. Начал искать текст (KeyDown) - вход страшно потерять фокус и текст не появляется
  3. Странно, но в тот же модальное окно, когда Выбор2 кратна типа, он работает прекрасный
  4. ВЫБ.2 создан на jqGrid dataInit события:

dataInit: function (elem) { 
 
$(elem).css({ width: "500px" }).select2({ 
 
\t data: StacjeDlaIdZamPoc, 
 
\t allowClear: false, 
 
\t tags: false, 
 
\t minimumInputLength: 0, 
 
\t placeholder: "Wskaż stację", 
 
\t templateResult: function (repo) { 
 
\t \t if (repo.loading) { 
 
\t \t \t return repo.text; 
 
\t \t } 
 
\t \t return $(repo.text2); 
 
\t }, 
 
\t templateSelection: function (repo) { 
 
\t \t return $(repo.text2); 
 
\t }, 
 
\t minimumResultsForSearch: 5 
 
}).on("select2:select", function(event) { 
 
\t var LWystapien = parseInt(event.params.data.LWystapien); 
 
\t $("#Wystapienie").val(1); 
 
\t $("#LWystapien").val(LWystapien); 
 
\t if (LWystapien > 1) { 
 
\t \t $("#Wystapienie").prop("disabled", false).spinner("enable"); 
 
\t } else { 
 
\t \t $("#Wystapienie").prop("disabled", true).spinner("disable"); 
 
\t } 
 
}); 
 
}

Как я уже писал выше, я попытался исправить для jQueryUI модальный:

if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) { 
 
    var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction; 
 
    $.ui.dialog.prototype._allowInteraction = function(e) { 
 
\t  console.log(e); 
 
     if ($(e.target).closest('.select2-dropdown').length) { return true; } 
 
     return ui_dialog_interaction.apply(this, arguments); 
 
    }; 
 
};

Но это не работает на jqGrid модальностей.

Это похоже на работу с Select2 полным biuld и AttachContainer, но я заметил проблемы с oveflow: скрытый :-(

+0

Я отправил ** ОБНОВЛЕНО ** часть моего ответа и [ваше оригинальное сообщение] (https://github.com/free-jqgrid/jqGrid/issues/59). Надеюсь, что это лучшее решение. – Oleg

ответ

1

Я отправил ответ на the issue уже, а потому, что все больше людей читают steckoverflow я повторяю здесь главный информация.

jqGrid использует jqModal.js модуль по умолчанию для редактирования формы. модальной jqModal.js регистр keypress keydown mousedown обработчик событий на document элемента (см here), который может блокировать нажатой клавиши и, чтобы установить фокус на первый видимый элемент ввода из редактировать форму (см. the line) , Решить проблему можно двумя способами. Самый простой способ будет

$.fn.jqm = false; 

, которые предотвращают использование jqModal.js модуля. Если один из файлов jQuery UI js затем jqGrid будет использовать jQuery UI modal в этом случае. Это самый простой способ решить проблему.

В качестве альтернативы можно добавить класс jqmID1 (или jqmID, прилагаемый другим индексом) к контейнеру select2. Пример соответствующего кода можно найти в the comment. Демо работает в Google Chrome по крайней мере. Это демонстрирует главным образом причину странного поведения select2 внутри редактирования формы. Рекомендуемым способом было бы просто использовать jQuery UI modal или не использовать опцию modal: true.

ОБНОВЛЕНО: Я подумал о проблеме и нашел еще лучшее решение. Напоминаю, что у меня была проблема с обработкой событий мыши в jqModal.js, и я опубликовал исправление много лет назад, которые включены уже в старую версию jqGrid. Исправление состоит из теста абсолютного положения курсора мыши, и если он был внутри области модального диалога, тогда было разрешено событие мыши.

Так что у меня возникла идея изменить jqModal.js для проведения тесных тестов для клавиатурных событий. Я разместил соответствующие изменения в бесплатном jqGrid (см. here), и теперь select2 не имеет проблем. См. http://jsfiddle.net/191no21j/13/.