FIX: Reduce issues when debouncing schema search (#241)

Previously the debounced value was both setting the filter value and
updating the input's text value. This causes visible UI issues, because
the debounce updating the input's text value would sometimes reset it,
especially if/when typing quickly.

This PR also uses sticky positioning for the search form, so that it
stays visible even when scrolling the list of schema tables.

assets/javascripts/discourse/components/explorer-schema.hbs

@@ -4,15 +4,12 @@
     @icon="chevron-left"
     @class="no-text unhide"
   />
-{{/if}}
-
-<div class="schema">
-  <div class={{if this.hideSchema "hidden"}}>
+{{else}}
+  <div class="schema">
     <div class="schema-search inline-form full-width">
-      <TextField
-        @value={{this.filter}}
-        @onChange={{this.filterChanged}}
-        @placeholderKey="explorer.schema.filter"
+      <input
+        type="text"
+        {{on "input" (action "filterChanged" value="target.value")}}
       />
       <DButton
         @action={{this.collapseSchema}}
@@ -21,14 +18,14 @@
       />
     </div>
 
-    <ConditionalLoadingSpinner @condition={{this.loading}}>
-      <div class="schema-container">
+    <div class="schema-container">
+      <ConditionalLoadingSpinner @condition={{this.loading}}>
         <ul>
           {{#each this.filteredTables as |table|}}
             <ExplorerSchema::OneTable @table={{table}} />
           {{/each}}
         </ul>
-      </div>
-    </ConditionalLoadingSpinner>
+      </ConditionalLoadingSpinner>
+    </div>
   </div>
-</div>
+{{/if}}

assets/stylesheets/explorer.scss

@@ -46,9 +46,6 @@ table.group-reports {
         margin-left: -53px;
         z-index: 1;
       }
-      .schema {
-        display: none;
-      }
     }
   }
 
@@ -78,10 +75,16 @@ table.group-reports {
       overflow-x: hidden;
       color: var(--primary-high);
       font-size: var(--font-down-1);
+      position: relative;
 
       .schema-search {
-        margin: 0.5em;
+        padding: 0.5em;
+        position: sticky;
+        background-color: var(--secondary);
+        top: 0px;
+        z-index: 1;
       }
+
       .schema-table-name {
         font-weight: bold;
         border-bottom: 1px solid var(--primary-low);