diff --git a/src/JSONEditor.scss b/src/JSONEditor.scss
index 275571d..e891798 100644
--- a/src/JSONEditor.scss
+++ b/src/JSONEditor.scss
@@ -57,7 +57,7 @@
       top: 100%;
       right: $search-box-offset + 20px; // keep space for scrollbar
       margin-top: $search-box-offset;
-      z-index: 1;
+      z-index: 2;
     }
   }
 
diff --git a/src/JSONEditor.svelte b/src/JSONEditor.svelte
index 95dbc6c..ee9609e 100644
--- a/src/JSONEditor.svelte
+++ b/src/JSONEditor.svelte
@@ -246,17 +246,16 @@
     }
   }
 
-  function doSearch(doc, searchText) {
-    return search(null, doc, searchText)
-  }
-
   // TODO: refactor the search solution and move it in a separate component
+  // in: doc, searchText, activeSearchResultIndex
+  // out: searchResultWithActive
+  // callbacks: change searchText, change doc, change activeSearchResultIndex
   let searchResult
   let activeSearchResult = undefined
   let activeSearchResultIndex
   let flatSearchResult
   let searchResultWithActive
-  $: searchResult = searchText ? doSearch(doc, searchText) : undefined
+  $: searchResult = searchText ? search(doc, searchText) : undefined
   $: flatSearchResult = flattenSearch(searchResult)
 
   $: {
diff --git a/src/utils/search.js b/src/utils/search.js
index 59713d3..0462bec 100644
--- a/src/utils/search.js
+++ b/src/utils/search.js
@@ -2,30 +2,34 @@ import { isNumber } from 'lodash-es'
 import { STATE_SEARCH_PROPERTY, STATE_SEARCH_VALUE } from '../constants.js'
 import { valueType } from './typeUtils.js'
 
-export function search (key, value, searchText) {
+export function search (doc, searchText) {
+  return searchRecursive(null, doc, searchText)
+}
+
+function searchRecursive (key, doc, searchText) {
   let results = undefined
 
   if (typeof key === 'string' && containsCaseInsensitive(key, searchText)) {
     results = createOrAdd(results, STATE_SEARCH_PROPERTY, 'search')
   }
 
-  const type = valueType(value)
+  const type = valueType(doc)
   if (type === 'array') {
-    value.forEach((item, index) => {
-      let childResults = search(index, item, searchText)
+    doc.forEach((item, index) => {
+      let childResults = searchRecursive(index, item, searchText)
       if (childResults) {
         results = createOrAdd(results, index, childResults)
       }
     })
   } else if (type === 'object') {
-    Object.keys(value).forEach(prop => {
-      let childResults = search(prop, value[prop], searchText)
+    Object.keys(doc).forEach(prop => {
+      let childResults = searchRecursive(prop, doc[prop], searchText)
       if (childResults) {
         results = createOrAdd(results, prop, childResults)
       }
     })
   } else { // type is a value
-    if (containsCaseInsensitive(value, searchText)) {
+    if (containsCaseInsensitive(doc, searchText)) {
       results = createOrAdd(results, STATE_SEARCH_VALUE, 'search')
     }
   }