Autocompletion hint doesn't popup when used in modal dialog

1

On version 5, we can popup the autocompletion hint from CM when it’s on a standard page. When we use the same code to try to popup the hint in a modal dialog, it no longer pops up the list of possible hints. Is there something special about the modal dialog that prevents this? Is there some style I need to change in order to get this to work? Thank you.

2

show-hint.js will append the tooltip to the body of the page that the editor is in, and position it based on the screen coordinates of the cursor. If your modal involves an iframe or a transform, I guess that may be interfering with this.

3

It looks like it’s positioned in the right spot but maybe it’s under the dialog. Can I set some css attributes to get it to appear over the dialog? I tried setting .CodeMirror-hints {z-index: 20, visibility: visible, opacity: 1, display: inline}, but it’s still not visible.

Can I handle the shown event to parent the ul hint list to my dialog body?
If so, how do I specify the handler for the ‘shown’ event? I am confused by the doc wording “The following events will be fired on the completions object during completion”. Is there an example for this?

Thanks

4

Probably – see this option.

5

So this is the way to get the tooltip containing the list of hints? Great.
Now, how do I specify the handler for the ‘shown’ event so I can get the tooltip and reparent it?

6

What element do I call addEventListener on in order to specify the “shown” event handler? The documentation says the “completions object” which I assume is the object returned from the hint function but that’s just an object.
I tried doing codeMirror.on(“shown”, handler) but never got the event.
Thanks

7

Are you using version 5 or 6 of the library? In 6, there is no “shown” event. In 5, you use CodeMirror.on on the completion result (it doesn’t have an addEventListener method).

8

I’m using version 5. I am able to catch the event on “startCompletion” and “endCompletion” events. But I do not catch the CodeMirror.on(“shown” event even though I see that “shown” is being thrown in show-hint.js. Unfortunately, the ul element with class “CodeMirror-hints” doesn’t exist yet when I catch startCompletion.
Why can’t I catch the “shown” event?

Thanks, Grant

9

I was finally able to catch the shown event.

How do I allow any key to pop up the hints? Do I have to have a separate extraKeys property for every character such as “Space”: “autocomplete”, “A”: “autocomplete”, … Can I specify a regular expression range of chars such as /[A-Z,a-z,0-9]/ ?

Also I want the character to actually appear in the editor before the hint popup appears. So when I type space, I want the space to appear as well as the hint popup. I see the the replies about returning CodeMirror.Pass but I don’t see how to return Pass and the hint from getHints.

Here’s some code:

    this.codeMirror.setOption("extraKeys", 
    {
        "Ctrl-Space": "autocomplete",
        "Space": "autocomplete",
        "A": "autocomplete",
        ...
    });

    this.codeMirror.setOption("hintOptions",
    {
        hint: function(cm, option)
        {
            return this.getHints(cm, this);
        }.bind(this)
    });

Thanks