From 4d9e7577f6345d7eb44d2b7bd08cc66733f092c4 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 14 Mar 2023 21:19:07 +0000
Subject: [PATCH 1/5] feat: expanded InputSelectSearch WIP

---
 .../elements/forms/inputSelectSearch.svelte   | 33 +++++++------
 .../[[page]]/+page.svelte                     | 49 +++++++++++++++++++
 2 files changed, 67 insertions(+), 15 deletions(-)

diff --git a/src/lib/elements/forms/inputSelectSearch.svelte b/src/lib/elements/forms/inputSelectSearch.svelte
index 0ea5d7330..aefd5dac3 100644
--- a/src/lib/elements/forms/inputSelectSearch.svelte
+++ b/src/lib/elements/forms/inputSelectSearch.svelte
@@ -3,6 +3,13 @@
     import { onMount } from 'svelte';
     import { Label } from '.';
 
+    type Option = $$Generic<{
+        value: string | boolean | number;
+        label: string;
+    }>;
+    type OptionArray = Option[];
+
+    export let options: OptionArray;
     export let id: string;
     export let label: string;
     export let optionalText: string | undefined = undefined;
@@ -11,18 +18,12 @@
     export let required = false;
     export let disabled = false;
     export let autofocus = false;
-    export let debounce = 250;
-    export let options: {
-        value: string | boolean | number;
-        label: string;
-    }[];
     // Input value
-    export let search: string = null;
+    export let search = '';
     // The actual selected value
     export let value: string | number | boolean;
 
     let element: HTMLInputElement;
-    let timer: ReturnType<typeof setTimeout>;
     let hasFocus = false;
     let selected: number = null;
 
@@ -36,16 +37,13 @@
         }
     });
 
-    function handleInput(event: Event) {
+    function handleInput() {
         hasFocus = true;
-        clearTimeout(timer);
-        timer = setTimeout(() => {
-            const target = event.target as HTMLInputElement;
-            search = target.value;
-        }, debounce);
     }
 
     function handleKeydown(event: KeyboardEvent) {
+        console.log('handle key down');
+
         event.stopImmediatePropagation();
 
         switch (event.key) {
@@ -71,6 +69,7 @@
                     event.preventDefault();
                     value = options[selected].value;
                     search = options[selected].label;
+                    // element.value = search;
                     hasFocus = false;
                 }
                 break;
@@ -78,6 +77,9 @@
     }
 </script>
 
+Inner search: {search}
+<br />
+
 <li class="u-position-relative form-item">
     <DropList
         bind:show={hasFocus}
@@ -106,7 +108,6 @@
                     on:click={() => (hasFocus = true)}
                     on:input={handleInput}
                     on:keydown={handleKeydown} />
-
                 <div class="options-list">
                     <button
                         class="options-list-button"
@@ -139,7 +140,9 @@
                             search = option.label;
                             hasFocus = false;
                         }}>
-                        <span class="text">{option.label}</span>
+                        <slot {option}>
+                            <span class="text">{option.label}</span>
+                        </slot>
                     </button>
                 </li>
             {:else}
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
index a7f59dfe0..0fd0bd8d9 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
@@ -24,6 +24,7 @@
     import { onMount } from 'svelte';
     import RelationshipsModal from './relationshipsModal.svelte';
     import CreateAttributeDropdown from '../attributes/createAttributeDropdown.svelte';
+    import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte';
 
     export let data: PageData;
     const projectId = $page.params.project;
@@ -86,6 +87,36 @@
             whole: formattedColumn
         };
     }
+
+    type Option = {
+        value: string;
+        label: string;
+        name: string;
+    };
+
+    const selectOptions: Option[] = [
+        {
+            value: '1',
+            label: 'first-ec68ac3515e4bc06',
+            name: 'Option 1'
+        },
+        {
+            value: '2',
+            label: 'second-ec68ac3521e4bc06',
+            name: 'Option 2'
+        }
+    ];
+
+    let selectSearch = '';
+    let selectValue = '';
+
+    $: filteredOptions = (function filter() {
+        console.log('filtering');
+
+        return selectOptions.filter((option) =>
+            option.label.toLowerCase().includes(selectSearch.toLowerCase())
+        );
+    })();
 </script>
 
 <Container>
@@ -103,6 +134,24 @@
         </div>
     </div>
 
+    Outer search: {selectSearch}
+    <br />
+    Outer value: {selectValue}
+    <InputSelectSearch
+        id="related"
+        label="Related Collection"
+        bind:search={selectSearch}
+        bind:value={selectValue}
+        required
+        placeholder="Search by ID"
+        options={filteredOptions}
+        let:option={o}>
+        <div class="u-flex u-gap-16">
+            <span style:color="hsl(var(--color-neutral-70))">{o.label}</span>
+            {o.name}
+        </div>
+    </InputSelectSearch>
+
     {#if $collection?.attributes?.length}
         {#if data.documents.total}
             <TableScroll isSticky>

From 483c5066eb2bc7f8f9ebf417955819494ade9285 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 15 Mar 2023 15:45:05 +0000
Subject: [PATCH 2/5] fix: selection bug

---
 .../elements/forms/inputSelectSearch.svelte   | 31 ++++++++++---------
 .../[[page]]/+page.svelte                     |  3 --
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/lib/elements/forms/inputSelectSearch.svelte b/src/lib/elements/forms/inputSelectSearch.svelte
index aefd5dac3..0e0895b6e 100644
--- a/src/lib/elements/forms/inputSelectSearch.svelte
+++ b/src/lib/elements/forms/inputSelectSearch.svelte
@@ -67,18 +67,26 @@
             case 'Enter':
                 if (selected !== null) {
                     event.preventDefault();
-                    value = options[selected].value;
-                    search = options[selected].label;
-                    // element.value = search;
-                    hasFocus = false;
+                    selectOption(options[selected]);
                 }
                 break;
         }
     }
-</script>
 
-Inner search: {search}
-<br />
+    function selectOption(option: Option) {
+        value = option.value;
+        search = option.label;
+        // It's not working without this line.
+        element.value = search;
+        hasFocus = false;
+    }
+
+    function clearOption() {
+        value = null;
+        search = '';
+        element.value = search;
+    }
+</script>
 
 <li class="u-position-relative form-item">
     <DropList
@@ -113,10 +121,7 @@ Inner search: {search}
                         class="options-list-button"
                         aria-label="clear field"
                         type="button"
-                        on:click|preventDefault={() => {
-                            search = '';
-                            value = null;
-                        }}>
+                        on:click|preventDefault={clearOption}>
                         <span class="icon-x" aria-hidden="true" />
                     </button>
                     <button
@@ -136,9 +141,7 @@ Inner search: {search}
                         class:is-selected={selected === i}
                         type="button"
                         on:click|preventDefault={() => {
-                            value = option.value;
-                            search = option.label;
-                            hasFocus = false;
+                            selectOption(option);
                         }}>
                         <slot {option}>
                             <span class="text">{option.label}</span>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
index 0fd0bd8d9..268c6b298 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
@@ -134,9 +134,6 @@
         </div>
     </div>
 
-    Outer search: {selectSearch}
-    <br />
-    Outer value: {selectValue}
     <InputSelectSearch
         id="related"
         label="Related Collection"

From 91b862a5408c8c15c5f93fa09dd18d7de780d6bc Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 16 Mar 2023 16:57:48 +0000
Subject: [PATCH 3/5] feat: custom selected style

---
 .../elements/forms/inputSelectSearch.svelte   | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/lib/elements/forms/inputSelectSearch.svelte b/src/lib/elements/forms/inputSelectSearch.svelte
index 0e0895b6e..9443e7230 100644
--- a/src/lib/elements/forms/inputSelectSearch.svelte
+++ b/src/lib/elements/forms/inputSelectSearch.svelte
@@ -22,6 +22,7 @@
     export let search = '';
     // The actual selected value
     export let value: string | number | boolean;
+    $: selectedOption = options.find((option) => option.value === value);
 
     let element: HTMLInputElement;
     let hasFocus = false;
@@ -104,18 +105,25 @@
 
         <div class="custom-select">
             <div class="input-text-wrapper" style="--amount-of-buttons:2">
-                <input
-                    type="text"
-                    class="input-text"
-                    {placeholder}
-                    {disabled}
-                    {required}
-                    bind:value={search}
-                    bind:this={element}
-                    on:focus={() => (hasFocus = true)}
-                    on:click={() => (hasFocus = true)}
-                    on:input={handleInput}
-                    on:keydown={handleKeydown} />
+                {#if $$slots.default && selectedOption}
+                    <output class="input-text is-read-only">
+                        <slot option={selectedOption} />
+                    </output>
+                {:else}
+                    <input
+                        type="text"
+                        class="input-text"
+                        {placeholder}
+                        {disabled}
+                        {required}
+                        bind:value={search}
+                        bind:this={element}
+                        on:focus={() => (hasFocus = true)}
+                        on:click={() => (hasFocus = true)}
+                        on:input={handleInput}
+                        on:keydown={handleKeydown} />
+                {/if}
+
                 <div class="options-list">
                     <button
                         class="options-list-button"

From 2b03d4ee4bac371637ecd25d83f7f46bf1247caf Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 29 Mar 2023 12:02:22 +0100
Subject: [PATCH 4/5] refactor: remove leftover logs

---
 src/lib/elements/forms/inputSelectSearch.svelte                 | 2 --
 .../collection-[collection]/[[page]]/+page.svelte               | 2 --
 2 files changed, 4 deletions(-)

diff --git a/src/lib/elements/forms/inputSelectSearch.svelte b/src/lib/elements/forms/inputSelectSearch.svelte
index 9443e7230..1422c2a8e 100644
--- a/src/lib/elements/forms/inputSelectSearch.svelte
+++ b/src/lib/elements/forms/inputSelectSearch.svelte
@@ -43,8 +43,6 @@
     }
 
     function handleKeydown(event: KeyboardEvent) {
-        console.log('handle key down');
-
         event.stopImmediatePropagation();
 
         switch (event.key) {
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
index 268c6b298..02fdb62c2 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
@@ -111,8 +111,6 @@
     let selectValue = '';
 
     $: filteredOptions = (function filter() {
-        console.log('filtering');
-
         return selectOptions.filter((option) =>
             option.label.toLowerCase().includes(selectSearch.toLowerCase())
         );

From ead37d941a79aed88b79e26ae2726ba9d962eb02 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 29 Mar 2023 18:59:41 +0100
Subject: [PATCH 5/5] fix: dropdown jumping around

---
 .../elements/forms/inputSelectSearch.svelte   |  1 +
 .../[[page]]/+page.svelte                     | 43 -------------------
 2 files changed, 1 insertion(+), 43 deletions(-)

diff --git a/src/lib/elements/forms/inputSelectSearch.svelte b/src/lib/elements/forms/inputSelectSearch.svelte
index 1422c2a8e..a7ee52215 100644
--- a/src/lib/elements/forms/inputSelectSearch.svelte
+++ b/src/lib/elements/forms/inputSelectSearch.svelte
@@ -84,6 +84,7 @@
         value = null;
         search = '';
         element.value = search;
+        hasFocus = false;
     }
 </script>
 
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
index 02fdb62c2..4eda6af27 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
@@ -87,34 +87,6 @@
             whole: formattedColumn
         };
     }
-
-    type Option = {
-        value: string;
-        label: string;
-        name: string;
-    };
-
-    const selectOptions: Option[] = [
-        {
-            value: '1',
-            label: 'first-ec68ac3515e4bc06',
-            name: 'Option 1'
-        },
-        {
-            value: '2',
-            label: 'second-ec68ac3521e4bc06',
-            name: 'Option 2'
-        }
-    ];
-
-    let selectSearch = '';
-    let selectValue = '';
-
-    $: filteredOptions = (function filter() {
-        return selectOptions.filter((option) =>
-            option.label.toLowerCase().includes(selectSearch.toLowerCase())
-        );
-    })();
 </script>
 
 <Container>
@@ -132,21 +104,6 @@
         </div>
     </div>
 
-    <InputSelectSearch
-        id="related"
-        label="Related Collection"
-        bind:search={selectSearch}
-        bind:value={selectValue}
-        required
-        placeholder="Search by ID"
-        options={filteredOptions}
-        let:option={o}>
-        <div class="u-flex u-gap-16">
-            <span style:color="hsl(var(--color-neutral-70))">{o.label}</span>
-            {o.name}
-        </div>
-    </InputSelectSearch>
-
     {#if $collection?.attributes?.length}
         {#if data.documents.total}
             <TableScroll isSticky>