No visible cursor

[jazzzz]

This issue pertains to the following package(s):

• GraphQL Playground - Electron App
• GraphQL Playground HTML
• GraphQL Playground
• GraphQL Playground Express Middleware
• GraphQL Playground Hapi Middleware
• GraphQL Playground Koa Middleware
• GraphQL Playground Lambda Middleware

What OS and OS version are you experiencing the issue(s) on?

Ubuntu 18.04 (under Firefox and Chrome).

What version of graphql-playground(-electron/-middleware) are you experiencing the issue(s) on?

graphql-playground-html 1.6.0 (as a dependency of apollo-server).

What is the expected behavior?

A cursor is displayed where I input the text.

What is the actual behavior?

No cursor is visible, I don't know where the text I type will be inserted.
In the HTML, the cursor is present and blinking, but with transparent background-color.

What steps may we take to reproduce the behavior?

Open GraphQL Playground.

Please provide a gif or image of the issue for a quicker response/fix.

(it's a static image, but a video gives the same result)

[gajus]

Inspecting the CSS, the element with the CodeMirror-cursors class does not have any attributes defining either width, height or color of the element. It appears that some CSS is getting swallowed somewhere. This should be marked as a bug @timsuchanek.

[vnenkpet]

+1
Really inconvenient to work with this.

[viralanomaly]

This is compounded by autocomplete (#714) - I hit enter to try to go to the next line, but it accepts the autocomplete and since I can't see the cursor, I don't actually know where I am until I start typing on the wrong line.

[jaywhy13]

Is there a known workaround for this as yet?

[vinicius73]

Any news abou this?

[ryanwiesjahn]

Here's a simple work-around that I'm using:

Using the browser extension Stylus, add the following CSS to the page:

.CodeMirror-cursor {
    width: 1px;
    background: rgba(255, 255, 255, 0.6) !important;
}

It might not do everything the cursor is supposed to do, but at least you can see it.

[SavePointSam]

Just upgraded to Apollo 2.0 and am running into this problem as well. :(

[ecwyne]

Definitely not ideal... but I figured out a way to have a visible cursor in the meantime.

1. Open the playground
2. Open the developer console and turn on device mode
3. Reload the page (the cursor shows up on mobile apparently)
4. Toggle device mode off and close the console.
5. Don't ever close the tab or refresh the page. 😝

[maxnachlinger]

The underline and block cursors work, might be simpler to just use those.

[jazzzz]

The underline and block cursors work, might be simpler to just use those.

For me it did not work either.

[jameskennethrobinson]

Also having this issue with apollo server 2.0

[PieterScheffers]

The css of @ryanwiesjahn works!

To use the css every time you open the playground create a bookmark and change the url of the bookmark to this:

javascript:var style = document.createElement('style'); style.type='text/css'; style.appendChild(document.createTextNode('.CodeMirror-cursor { width: 1px; background: rgba(255, 255, 255, 0.6) !important; }')); document.getElementsByTagName('head')[0].appendChild(style);void(0);

Then when you go to the GraphQL playground or refresh the page just push this bookmark to insert the css of @ryanwiesjahn and make the cursor visible again.

Tested in Google Chrome.

[5amfung]

I hope this could be fixed soon. It's almost impossible to use without the cursor.

[massimilianomarini]

Thanks @ryanwiesjahn, with your css it is possible to use the playground! 👍

[gnemtsov]

For me, the cursor is invisible and settings don't work at all. They are not applied (theme or cursor type) - nothing changes. My browser is Google Chrome, but in Firefox it is also true. I am using CSS tweaks, found in this thread to make the cursor visible.

[massimilianomarini]

Yes, I can confirm what @gnemtsov said, in my Google Chrome (latest stable release) settings don't work at all. They are saved in the localStorage but are not applied, also after a hard refresh, nothing change.

[lpellegr]

I am getting the same issue when using Playground as configured by apollo-server-express.

The issue seems related to the default settings for the property editor.cursorShape. If you force a value in your configuration object, then the cursor becomes visible:

playground: {
    settings: {
        'editor.cursorShape': 'line' // possible values: 'line', 'block', 'underline'
    }
}

[dandv]

Same problem when upgrading from apollo-server 2.0.0-rc5 to 2.0.0.

As a workaround, you can paste your endpoint at https://legacy.graphqlbin.com/new and use that UI. The cursor is visible there.

[acoreyj]

Not sure if the issue is apollo-server or graphql-playground but seeing the same issue. Also you can't change to the light theme

[Andrejs1979]

Same here

[iandvt]

+1 - encountered this issue when migrating from Apollo 1 -> Apollo 2

[MFQ]

+1 Still facing that issue.

[5amfung]

@lpellegr Would you mind explaining or give an example how I would force feed the setting into the configuration object? I tried the following but it didn't work.

new ApolloServer({
    schema,
    playground: {
      settings: {
        'editor.cursorShape': 'line'
      }
    },
  });

[rdickert]

@lpellegr strange, that code looks correct to me. It works for me with the following code on apollo-server 2.0.0:

  ... // set up typeDefs, resolvers, context
  const playground = {
    settings: {
      'editor.cursorShape': 'line',
    },
  };

  return new ApolloServer({ typeDefs, resolvers, context, playground });

Maybe #1516 above will help (if accepted)

[scf4]

@rdickert I get typescript errors with the above. There is no editor.cursorShape property.

[adostal]

@scf4 Yes. Quick hack is set settings as 'any' type.

[Alvyre]

The issue is also on koa server package :/

When you force the settings it works although

playground: {
    settings: { // Force setting, workaround: https://github.com/prisma/graphql-playground/issues/790
      'editor.theme': 'dark',
      'editor.cursorShape': 'line' // possible values: 'line', 'block', 'underline'
    }
  }

[musab]

Anyone find a fix for hapi server pkg?

[jorgeguberte]

I can replicate the issue with Opera and Chrome on Windows 10

[vincenzo]

Ha, forcing the settings works. I suspect the issue is still with Playground, though, as it seems not to be reading from the saved settings. The other things I see is that I can't force request.credentials (at least it does not show as changed in the settings panel when I do, whilst the other do show changed).

[ryanQL]

I can confirm that it works by setting the playground cursorShape property:

const playground = {
  settings: {
    'editor.theme': 'light',
    'editor.cursorShape': 'line',
  },
};

const runServer = async () => {
  // Get newly merged schema
  const schema = await createNewSchema();
  // start server with the new schema
  const server = new ApolloServer({
    schema,
    playground,
  });
  server.listen().then(({url}) => {
    console.log(`Running at ${url}`);
  });
};

[thardy]

Thank you for this! This worked for me. I was very disappointed to try GraphQLPlayground for the first time, only to find out there is no cursor in the editor.

This solved it for me.

[DHFW]

For anyone with TypeScript errors:

  const playground = {
    settings: {
      'editor.cursorShape': 'line',
    } as any,
  };

[iamclaytonray]

Adding this works for me, as mentioned above.

.CodeMirror-cursor {
    width: 1px;
    background: rgba(255, 255, 255, 0.6) !important;
}

I don't see how this has not been fixed in a release yet. I can open a PR but please make sure this fix goes into the next release. This is extremely annoying and time consuming trying to click around and type correctly.

[huv1k]

It should be finally fixed. Sorry for troubles, if somebody encounters it open it again please.

[icoderight]

I just encountered the problem. not sure what other info i can give you

[huv1k]

@icoderight What version of playground do you use?

[anthony-gallego-github]

Personally, I stopped my Dark mode extension (Dark Reader) and the cursor came back. ;p

[vxm5091]

Personally, I stopped my Dark mode extension (Dark Reader) and the cursor came back. ;p

This one did the trick for me!