Autocomplete for JS is working in SandBox, but not in App + HELP

[soma83]

Have an App with React Boilerplate and Dandelion template. I have this very same component as in this sandbox. In the sandbox the component works entirely as expected, on my app this components works fine but the code auto-completion. I thought it was a CSS styling issue, so I placed it into the app.js, and the issue remains. Also I copied all the css and the js files from nodemodules to a folder next to the component file, same behaviour. Here is a repo: https://github.com/soma83/mycodemirrornotcomplete/tree/master/public. How to solve this?

[fongandrew]

Do you have a repo with your app set up? Without seeing what's different between the sandbox and your app, it's very difficult to guess what might be wrong.

[soma83]

@fongandrew thank you for your response, here is the repo: https://github.com/soma83/mycodemirrornotcomplete. The component is in components/Editor/CodeEditor and it is the only thing this app launches. As you can see, the component here in and in https://codesandbox.io/s/clever-shape-20y39?file=/src/App.js are pretty much the same. Moreover if I start typing func then press Ctrl+Space it completes function with no options. I tested it on Chromiun and Firfeox. Also I am running Linux Mint 19.3.

[fongandrew]

I cloned your repo, then did an npm install + npm run start. Ctrl-space autocompletes func for me just fine. So I'm not sure what's going on.

Can you try deleting node_modules, doing a fresh npm install and see if that resolves your issue? Otherwise, maybe it's a Linux thing? I'm on macOS, so that might explain it.

[fongandrew]

The only other things I can think of:

• Does using something other than Ctrl-space as the extra key modifier work?
• Try memoizing the extraKeys option:

const extraKeys = useMemo(() => ({
  'Ctrl-Space': 'autocomplete'
}), []);

As is, we're updating the extraKeys on each render, which maybe does something weird?

[soma83]

@fongandrew try to not type and hit Ctrl+Space in a black screen... it should show the proposals options, right? It does not. If I type in "func" and hit Ctrl+Space it completes "function" (the code does that for me either) but if I type in "f" and hit Ctl+Space it does nothing. No proposals no nothing. I did as you suggested and everything remains just the same. I don't think it is a operating system issue since this same repo was clonned on Windows 10 and the result is the same. I read in some foro that it should be a webpack missconfiguration with the CSS loader, but it was related to webpack 3 and this is webpack 4 and the 'codemirror/lib/codemirror.css' 'codemirror/theme/material.css' and 'codemirror/addon/fold/foldgutter.css' are imported just fine. The problem is when I expect that codemirror shows me the proposals. Also tried: 'Tab': 'autocomplete' Insead of: 'Ctrl-Space': 'autocomplete' Same result, the autocompletion options does not show up.

[fongandrew]

OK, I see what you're describing. It's a CSS issue. The autocomplete menu is there in the DOM. It's just not visible.

CodeMirror renders the menu as a ul with a CodeMirror-hints class at the end of the body element. It has a z-index: 10 but your #app element has a z-index: 1000 and is therefore on top of it.

I'm not sure how to control where CodeMirror renders its autocomplete menu (this is something you can raise as an issue in the main CodeMirror repo if you want), but the easy fix here is to either reduce the z-index of your #app or increase the z-index of .CodeMirror-hints.

[fongandrew]

Going to close this issue but feel free to mention me if that doesn't work.