ckeditor + smartgwt modal window + диалог выпадающий фокус, но не показывает опции

Question

Я использую ckEditor вместе с GWT и SmartGWT. У меня проблема: всякий раз, когда ckEditor отображает диалоговое окно (например, кнопка ссылки, кнопка таблицы), хотя элементы в фокусе усиления диалога (тексты ввода работают нормально, я могу писать внутри них), выпадающие списки (элементы выбора) при нажатии они не расширяются, чтобы показывать свои опционные элементы (они расширяются только тогда, когда у них есть фокус и пользователь попадает «пробел»). Это происходит только в firefox и chrome (последние версии), тогда как в IE11 он работает так, как ожидалось.

Обратите внимание, что я уже знаю о «фокус» проблемы существующей, если экземпляр CKEditor существует в GWT/JQuery модальный и я уже включены исправления:

$wnd.CKEDITOR.on('dialogDefinition', function (evt) { 
     var dialog = evt.data.definition.dialog; 
     dialog.on('show', function() { 
       var element = this.getElement(); 
       var labelledby = element.getAttribute('aria-labelledby'); 
       var nativeElement = $wnd.document.querySelector("[aria-labelledby='" + labelledby + "']"); 
       nativeElement.onclick = function (evt) { 
       if ((evt.target.tagName == "INPUT" || evt.target.tagName == "SELECT" || evt.target.tagName == "TEXTAREA") && 
         -1 != evt.target.className.indexOf("cke_dialog_ui_input")) { 
         evt.target.focus(); 
       }; 
       } 
     }); 
    }); 

Любой намек, как я могу сделать выпадающие списки, чтобы вести себя правильно? Для меня это выглядит так, что выпадающий элемент не получает событие щелчка (хотя по щелчку становится фокусом), или каким-либо образом распространение события неожиданно останавливается.

EDIT забыл упомянуть о том, что проблема возникает, если экземпляр CKEditor находится внутри модального окна SmartGWT. Более конкретно, если я изложу

Window win = new Window(); //com.smartgwt.client.widgets.Window 
win.setIsModal(false); 

, а затем добавить DynamicForm формы, которая содержит элемент CKEditor на этом окне, тогда диалог выпадающих работать нормально, однако, если я изложу

win.setIsModal(true); 

я получаю дефектное поведение, описанное выше

Answer 1

В случае, если у кого-то другая проблема со мной, решение должно вызвать win.hideClickMask() после show событие диалога. Это может быть достигнуто многими способами в зависимости от того, как ckEditor интегрирован с SmartGWT. В моем implementation это достигается путем переопределения onDialogShow(), как показано ниже:

final CKEditor ckEditor = new CKEditor(conf) { 
       @Override 
       public void onDialogShow() { 
        // to overcome the problem that smartgwt modality obstruct the dropdowns of a ckeditor dialog to be pressed 
        final NodeList<Element> allWindowsWithModalMask = findAllWindowsWithModalMask(); 
        if(allWindowsWithModalMask != null) { 
         for(int i =0; i<allWindowsWithModalMask.getLength(); i++) { 
          Element el = allWindowsWithModalMask.getItem(i); 
          String id = el.getAttribute("eventproxy"); 
          if(Canvas.getById(id) != null) { 
           hideClickMask(Canvas.getById(id).getOrCreateJsObj()); 
          } 
         } 
        } 
       } 
      }; 

и

protected native NodeList<Element> findAllWindowsWithModalMask() /*-{ 
    return $wnd.document.querySelectorAll("[class='windowBackground']"); 
}-*/; 

protected native void hideClickMask(JavaScriptObject windowCanvas) /*-{ 
    windowCanvas.hideClickMask(); 
}-*/;