From 3907c4926383303ff85d992bb276e2b173cf0843 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Tue, 18 Apr 2023 10:33:25 -0400
Subject: [PATCH] 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.
---
 .../discourse/components/explorer-schema.hbs  | 23 ++++++++-----------
 assets/stylesheets/explorer.scss              | 11 +++++----
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/assets/javascripts/discourse/components/explorer-schema.hbs b/assets/javascripts/discourse/components/explorer-schema.hbs
index 7f6dca3..d453968 100644
--- a/assets/javascripts/discourse/components/explorer-schema.hbs
+++ b/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>
\ No newline at end of file
+{{/if}}
\ No newline at end of file
diff --git a/assets/stylesheets/explorer.scss b/assets/stylesheets/explorer.scss
index 24dc966..96897a8 100644
--- a/assets/stylesheets/explorer.scss
+++ b/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);