ckeditor + smartgwt modal window + dialog dropdown gains focus but does not show options

Question

I am using the ckEditor along with GWT and SmartGWT. I have a problem that whenever the ckEditor displays a dialog (e.g. link button, table button), although the items in the dialog gain focus (input texts work fine, I can write inside them), the dropdowns (select elements) when clicking on them, do not expand to show their option items (they expand only when they have focus and user hits "spacebar"). This happens only in firefox and chrome (latest versions) while on IE11 it works as expected.

Note that I am already aware of the "focus" problem existing if a ckEditor instance exists in a GWT/jquery modal and I have already included a fix:

$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();
                 };
              }
        });
    });

Any hint how I can make the dropdowns to behave correctly? To me it looks like the dropdown element does not receive the click event (although on click it gets focus) or somehow the event's propagation stops unexpectedly.

EDIT Forgot to mention that the problem appears if the ckEditor instance is inside a modal SmartGWT window. More specifically if I set

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

and then add the DynamicForm form which contains the ckEditor item on that window then the dialog dropdowns work fine, however if I set

win.setIsModal(true);

I get the faulty behavior described above

score 2 · Accepted Answer · answered Feb 09 '16 at 08:32

In case anyone else has the same problem with me, the solution is to call win.hideClickMask() upon show event of the dialog. This can be achieved in many ways depending on how ckEditor is integrated with SmartGWT. In my implementation this is achieved by overriding onDialogShow() as below:

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());
                            }
                        }
                    }
                }
            };

and

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

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

ckeditor + smartgwt modal window + dialog dropdown gains focus but does not show options

1 Answers1