Search code examples
gwtckeditorsmartgwtckeditor4.x

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


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


Solution

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