issue Add ability to exit quicksearch by clicking ouside of the search/quicksearch fields #127

This commit is contained in:
Kostiantyn Stoliarskyi 2023-06-07 15:01:41 +03:00
parent e87cf2fd11
commit 78c018b3d3
2 changed files with 9 additions and 3 deletions

View File

@ -4,7 +4,7 @@
<!-- Modal content --> <!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700"> <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header --> <!-- 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> <span class="sr-only">Close modal</span>
</button> </button>
<!-- Modal body --> <!-- Modal body -->

View File

@ -7,10 +7,16 @@ const currentSearchInput: HTMLInputElement =
const searchDiv: HTMLElement = document.querySelector('#quickSearchModal'); const searchDiv: HTMLElement = document.querySelector('#quickSearchModal');
const modalOptions: ModalOptions = { const modalOptions: ModalOptions = {
backdrop: 'dynamic',
closable: true, closable: true,
backdrop: 'static',
onHide: () => {}, onHide: () => {},
onShow: () => {}, onShow: () => {
const modalBack = document.querySelector('.bg-opacity-50');
modalBack.addEventListener('click', () => {
currentSearchInput.value = '';
quickSearchModal.hide();
});
},
onToggle: () => {}, onToggle: () => {},
}; };