Fix completion hide

Author: timsuchanek

packages/graphql-playground/src/components/Playground/QueryEditor.tsx

@@ -102,7 +102,7 @@ export class QueryEditor extends React.Component<Props, {}> {
       },
       hintOptions: {
         schema: this.props.schema,
-        closeOnUnfocus: true,
+        closeOnUnfocus: false,
         completeSingle: false,
       },
       gutters,

packages/graphql-playground/src/components/Playground/onHasCompletion.tsx

@@ -16,37 +16,74 @@ import * as marked from 'marked'
 export default function onHasCompletion(cm, data, onHintInformationRender) {
   const CodeMirror = require('codemirror')
 
+  let wrapper
   let information
   let deprecation
 
-  // When a hint result is selected, we augment the UI with information.
+  // When a hint result is selected, we touch the UI.
   CodeMirror.on(data, 'select', (ctx, el) => {
     // Only the first time (usually when the hint UI is first displayed)
-    // do we create the information nodes.
-    if (!information) {
+    // do we create the wrapping node.
+    if (!wrapper) {
+      // Wrap the existing hint UI, so we have a place to put information.
       const hintsUl = el.parentNode
+      const container = hintsUl.parentNode
+      wrapper = document.createElement('div')
+      container.appendChild(wrapper)
+
+      // CodeMirror vertically inverts the hint UI if there is not enough
+      // space below the cursor. Since this modified UI appends to the bottom
+      // of CodeMirror's existing UI, it could cover the cursor. This adjusts
+      // the positioning of the hint UI to accomodate.
+      let top = hintsUl.style.top
+      let bottom = ''
+      const cursorTop = cm.cursorCoords().top
+      if (parseInt(top, 10) < cursorTop) {
+        top = ''
+        bottom = window.innerHeight - cursorTop + 3 + 'px'
+      }
+
+      // Style the wrapper, remove positioning from hints. Note that usage
+      // of this option will need to specify CSS to remove some styles from
+      // the existing hint UI.
+      wrapper.className = 'CodeMirror-hints-wrapper'
+      wrapper.style.left = hintsUl.style.left
+      wrapper.style.top = top
+      wrapper.style.bottom = bottom
+      hintsUl.style.left = ''
+      hintsUl.style.top = ''
 
       // This "information" node will contain the additional info about the
       // highlighted typeahead option.
       information = document.createElement('div')
       information.className = 'CodeMirror-hint-information'
-      hintsUl.appendChild(information)
 
       // This "deprecation" node will contain info about deprecated usage.
       deprecation = document.createElement('div')
       deprecation.className = 'CodeMirror-hint-deprecation'
-      hintsUl.appendChild(deprecation)
+
+      if (bottom) {
+        wrapper.appendChild(deprecation)
+        wrapper.appendChild(information)
+        wrapper.appendChild(hintsUl)
+      } else {
+        wrapper.appendChild(hintsUl)
+        wrapper.appendChild(information)
+        wrapper.appendChild(deprecation)
+      }
 
       // When CodeMirror attempts to remove the hint UI, we detect that it was
-      // removed and in turn remove the information nodes.
+      // removed from our wrapper and in turn remove the wrapper from the
+      // original container.
       let onRemoveFn
-      hintsUl.addEventListener(
+      wrapper.addEventListener(
         'DOMNodeRemoved',
         (onRemoveFn = event => {
           if (event.target === hintsUl) {
-            hintsUl.removeEventListener('DOMNodeRemoved', onRemoveFn)
+            wrapper.removeEventListener('DOMNodeRemoved', onRemoveFn)
+            wrapper.parentNode.removeChild(wrapper)
+            wrapper = null
             information = null
-            deprecation = null
             onRemoveFn = null
           }
         }),

packages/graphql-playground/src/styles/graphiql_dark.css

@@ -1229,6 +1229,8 @@ span.CodeMirror-selectedtext { background: none; }
     position: absolute;
     z-index: 10;
     border-radius: 2px;
+    top: 0 !important;
+    left: 0 !important;
 }
 
 .CodeMirror-hints-wrapper {