☰

GraphQL Playground Timed Autocomplete Hide

Hides GraphQL Playground autocomplete suggestions after a short delay

Author
lfernandezcall
Daily installs
0
Total installs
1
Ratings
0 0 0
Version
2025-05-31
Created
2025-05-31
Updated
2025-05-31
Size
2.26 KB
License
MIT
Applies to

Problem Solved: This user script addresses a common and frustrating UI bug in GraphQL Playground (and potentially some other CodeMirror-based editors) where the autocomplete suggestions or information/help boxes can get stuck on the screen, obscuring your query and making the interface difficult to use.

How it Works: The script uses a MutationObserver to actively monitor the DOM for the appearance of GraphQL Playground's autocomplete and hint boxes. Once detected, it starts a short timer (default: 1.5 seconds). After this delay, the script automatically hides these boxes, ensuring they appear briefly to provide assistance but then disappear to clear your workspace. This allows you to see the suggestions and then have a clean view of your query.

Features:

  • Automatic Hiding: Suggestions disappear after a set delay.
  • Non-intrusive: Allows time to view suggestions before they're hidden.
  • Lightweight: Uses efficient MutationObserver for minimal performance impact.
  • Widely Compatible: Designed for various versions of GraphQL Playground that exhibit this common autocomplete sticking issue.

Configuration (Optional): If you wish to adjust the display duration, you can easily modify the const delay variable within the script's code. Open the script in your Tampermonkey editor and change the value (in milliseconds). For example, 1000 for 1 second, 2000 for 2 seconds.

Troubleshooting:

  • If hints are still stuck, ensure the script is enabled in Tampermonkey.
  • If the delay isn't working as expected, try adjusting the delay variable.
  • This script targets specific CodeMirror class names (.CodeMirror-hints, .CodeMirror-hints-wrapper, .CodeMirror-hint-information). If you're using a heavily customized GraphQL Playground, you might need to inspect the elements in your browser's developer tools and adjust the class names in the script's querySelectorAll line.

Contribution/Feedback: If you encounter any issues or have suggestions, please feel free to leave a comment on this script's page.