From 035d4ff95702b29344b140c23464833e6b6fcc0d Mon Sep 17 00:00:00 2001
From: Simon Cambier <simon.cambier@protonmail.com>
Date: Wed, 20 Apr 2022 08:12:48 +0200
Subject: [PATCH] Fixed input binding

---
 src/CmpInput.svelte       | 13 +++++++------
 src/CmpModalInFile.svelte |  2 +-
 src/CmpModalVault.svelte  | 27 ++++++++++++++++++---------
 src/stores.ts             |  7 -------
 4 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/CmpInput.svelte b/src/CmpInput.svelte
index aa759a4..f7520bc 100644
--- a/src/CmpInput.svelte
+++ b/src/CmpInput.svelte
@@ -2,11 +2,10 @@
 import { debounce } from "obsidian"
 import { createEventDispatcher, onMount, tick } from "svelte"
 
-export let debouncedValue: string
+export let value = ''
+const dispatch = createEventDispatcher()
 
 let elInput: HTMLInputElement
-let inputValue: string
-const dispatch = createEventDispatcher()
 
 onMount(async () => {
   await tick()
@@ -15,7 +14,9 @@ onMount(async () => {
   elInput.select()
 })
 
-const debouncedOnInput = debounce(() => (debouncedValue = inputValue), 100)
+const debouncedOnInput = debounce(() => {
+  dispatch("input", value)
+}, 100)
 
 function moveNoteSelection(ev: KeyboardEvent): void {
   switch (ev.key) {
@@ -47,10 +48,10 @@ function moveNoteSelection(ev: KeyboardEvent): void {
   }
 }
 </script>
-{inputValue} - {debouncedValue}
+
 <input
+  bind:value
   bind:this={elInput}
-  bind:value={inputValue}
   on:input={debouncedOnInput}
   on:keydown={moveNoteSelection}
   type="text"
diff --git a/src/CmpModalInFile.svelte b/src/CmpModalInFile.svelte
index 64ad347..38f9dcb 100644
--- a/src/CmpModalInFile.svelte
+++ b/src/CmpModalInFile.svelte
@@ -94,7 +94,7 @@ function openSelection(): void {
 
 <div class="modal-title">Omnisearch - File</div>
 <CmpInput
-  bind:debouncedValue={searchQuery}
+  on:input={(e) => (searchQuery = e.detail)}
   on:enter={openSelection}
   on:arrow-up={() => moveIndex(-1)}
   on:arrow-down={() => moveIndex(1)}
diff --git a/src/CmpModalVault.svelte b/src/CmpModalVault.svelte
index 7188c87..d89ad24 100644
--- a/src/CmpModalVault.svelte
+++ b/src/CmpModalVault.svelte
@@ -1,3 +1,7 @@
+<script lang="ts" context="module">
+let lastSearch = ""
+</script>
+
 <script lang="ts">
 import { TFile } from "obsidian"
 import { onMount, tick } from "svelte"
@@ -7,18 +11,18 @@ import type { ResultNote } from "./globals"
 import { OmnisearchModal } from "./modal"
 import { openNote } from "./notes"
 import { getSuggestions } from "./search"
-import { lastSearch, modal, plugin } from "./stores"
+import { modal, plugin } from "./stores"
 import { loopIndex } from "./utils"
 
 let selectedIndex = 0
 let searchQuery: string
 let resultNotes: ResultNote[] = []
-$: selectedNote = resultNotes[selectedIndex]!
+$: selectedNote = resultNotes[selectedIndex]
 
 $: {
   if (searchQuery) {
     resultNotes = getSuggestions(searchQuery)
-    $lastSearch = searchQuery
+    lastSearch = searchQuery
   }
   selectedIndex = 0
   scrollIntoView()
@@ -26,7 +30,7 @@ $: {
 
 onMount(async () => {
   await tick()
-  searchQuery = $lastSearch
+  searchQuery = lastSearch
 })
 
 async function createOrOpenNote(item: ResultNote): Promise<void> {
@@ -47,22 +51,26 @@ async function createOrOpenNote(item: ResultNote): Promise<void> {
 }
 
 function onClick() {
+  if (!selectedNote) return
   openNote(selectedNote)
   $modal.close()
 }
 
 function onInputEnter(): void {
   // console.log(event.detail)
+  if (!selectedNote) return
   openNote(selectedNote)
   $modal.close()
 }
 
 function onInputCtrlEnter(): void {
+  if (!selectedNote) return
   openNote(selectedNote, true)
   $modal.close()
 }
 
 function onInputShiftEnter(): void {
+  if (!selectedNote) return
   createOrOpenNote(selectedNote)
   $modal.close()
 }
@@ -83,20 +91,21 @@ function moveIndex(dir: 1 | -1): void {
 }
 
 function scrollIntoView(): void {
-  if (selectedNote) {
-    tick().then(() => {
+  tick().then(() => {
+    if (selectedNote) {
       const elem = document.querySelector(
         `[data-note-id="${selectedNote.path}"]`
       )
       elem?.scrollIntoView({ behavior: "auto", block: "nearest" })
-    })
-  }
+    }
+  })
 }
 </script>
 
 <div class="modal-title">Omnisearch - Vault</div>
 <CmpInput
-  bind:debouncedValue={searchQuery}
+  value={lastSearch}
+  on:input={(e) => (searchQuery = e.detail)}
   on:enter={onInputEnter}
   on:shift-enter={onInputShiftEnter}
   on:ctrl-enter={onInputCtrlEnter}
diff --git a/src/stores.ts b/src/stores.ts
index bf40ed2..41321cc 100644
--- a/src/stores.ts
+++ b/src/stores.ts
@@ -27,11 +27,6 @@ function createIndexedNotes() {
   }
 }
 
-/**
- * If this field is set, the search will be limited to the given file
- */
-// export const inFileSearch = writable<TFile | null>(null)
-
 /**
  * A reference to the plugin instance
  */
@@ -46,5 +41,3 @@ export const modal = writable<OmnisearchModal>()
  * The entire list of indexed notes, constantly kept up-to-date.
  */
 export const indexedNotes = createIndexedNotes()
-
-export const lastSearch = writable('')