Ensure CodeMirror hints are rendered on top of modals

5 years ago · e65bfe5b9a
2 changed files with 8 additions and 3 deletions
--- a/packages/builder/src/components/common/CodeMirrorEditor.svelte
+++ b/packages/builder/src/components/common/CodeMirrorEditor.svelte
@ -1,6 +1,4 @@
 <script context="module">
-  import { Label } from "@budibase/bbui"
-
  export const EditorModes = {
    JS: {
      name: "javascript",
@ -21,6 +19,7 @@
 </script>

 <script>
+  import { Label } from "@budibase/bbui"
  import CodeMirror from "components/integration/codemirror"
  import { themeStore } from "builderStore"
  import { createEventDispatcher, onMount } from "svelte"
@ -156,4 +155,9 @@
  div :global(.CodeMirror-focused) {
    border-color: var(--spectrum-alias-border-color-mouse-focus);
  }
+
+  /* Ensure hints are always on top */
+  :global(.CodeMirror-hints) {
+    z-index: 999999;
+  }
 </style>
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@ -49,6 +49,7 @@
  $: filteredHelpers = helpers?.filter(helper => {
    return helper.label.match(searchRgx) || helper.description.match(searchRgx)
  })
+  $: codeMirrorHints = bindings?.map(x => `$("${x.readableBinding}")`)

  const updateValue = value => {
    valid = isValid(readableToRuntimeBinding(bindings, value))
@ -178,7 +179,7 @@
                height={200}
                value={decodeJSBinding(jsValue)}
                on:change={onChangeJSValue}
-                hints={bindings?.map(x => `$("${x.readableBinding}")`)}
+                hints={codeMirrorHints}
              />
              <Body size="S">
                JavaScript expressions are executed as functions, so ensure that