From 78c018b3d3a7111eb43c27d386f598e0c9b0b3d2 Mon Sep 17 00:00:00 2001
From: Kostiantyn Stoliarskyi <saintkos117@gmail.com>
Date: Wed, 7 Jun 2023 15:01:41 +0300
Subject: [PATCH] issue Add ability to exit quicksearch by clicking ouside of
 the search/quicksearch fields #127

---
 app/templates/search/quick_search_window.html |  2 +-
 src/quickSearch.ts                            | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/templates/search/quick_search_window.html b/app/templates/search/quick_search_window.html
index de529d3..e65715b 100644
--- a/app/templates/search/quick_search_window.html
+++ b/app/templates/search/quick_search_window.html
@@ -4,7 +4,7 @@
     <!-- Modal content -->
     <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
       <!-- Modal header -->
-        <button type="button" class="hidden text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="quickSearchModal"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
+        <button type="button" data-modal-hide="quickSearchModal" class="hidden text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="quickSearchModal"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
           <span class="sr-only">Close modal</span>
         </button>
       <!-- Modal body -->
diff --git a/src/quickSearch.ts b/src/quickSearch.ts
index 70a7746..4be11c8 100644
--- a/src/quickSearch.ts
+++ b/src/quickSearch.ts
@@ -7,10 +7,16 @@ const currentSearchInput: HTMLInputElement =
 const searchDiv: HTMLElement = document.querySelector('#quickSearchModal');
 
 const modalOptions: ModalOptions = {
+  backdrop: 'dynamic',
   closable: true,
-  backdrop: 'static',
   onHide: () => {},
-  onShow: () => {},
+  onShow: () => {
+    const modalBack = document.querySelector('.bg-opacity-50');
+    modalBack.addEventListener('click', () => {
+      currentSearchInput.value = '';
+      quickSearchModal.hide();
+    });
+  },
   onToggle: () => {},
 };