cotugno/immich
2
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-15 09:59:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): broken search-bar during page load (#3548)

Browse Source 
* fix: broken search-bar during page load

* fix: prevent race condition between go back and close search bar
This commit is contained in:
martin 2023-08-05 20:05:24 +02:00 committed by GitHub
parent 1f64649434
commit f1b92718d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/lib/components/shared-components/search-bar/search-bar.svelte
View File

@ -3,7 +3,7 @@
import Magnify from 'svelte-material-icons/Magnify.svelte';
import Close from 'svelte-material-icons/Close.svelte';
import { goto } from '$app/navigation';
import { isSearchEnabled, savedSearchTerms } from '$lib/stores/search.store';
import { isSearchEnabled, preventRaceConditionSearchBar, savedSearchTerms } from '$lib/stores/search.store';
import { fly } from 'svelte/transition';
import { clickOutside } from '$lib/utils/click-outside';
export let value = '';
@ -23,8 +23,8 @@
searchValue = value.slice(2);
}
$savedSearchTerms = $savedSearchTerms.filter((item) => item !== searchValue);
saveSearchTerm(searchValue);
$savedSearchTerms = $savedSearchTerms.filter((item) => item !== value);
saveSearchTerm(value);
const params = new URLSearchParams({
q: searchValue,
@ -59,12 +59,16 @@
};
const onFocusOut = () => {
if ($isSearchEnabled) {
$preventRaceConditionSearchBar = true;
}
showBigSearchBar = false;
$isSearchEnabled = false;
};
</script>
<button class="w-full" use:clickOutside on:outclick={onFocusOut}>
<div role="button" class="w-full" use:clickOutside on:outclick={onFocusOut}>
<form
draggable="false"
autocomplete="off"
@ -160,4 +164,4 @@
</div>
{/if}
</form>
</button>
</div>

1
web/src/lib/stores/search.store.ts
View File

@ -3,3 +3,4 @@ import { writable } from 'svelte/store';
export const savedSearchTerms = persisted<string[]>('search-terms', [], {});
export const isSearchEnabled = writable<boolean>(false);
export const preventRaceConditionSearchBar = writable<boolean>(false);

6
web/src/routes/(user)/search/+page.svelte
View File

@ -26,6 +26,7 @@
import { onDestroy, onMount } from 'svelte';
import { browser } from '$app/environment';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { preventRaceConditionSearchBar } from '$lib/stores/search.store';
export let data: PageData;
@ -53,7 +54,10 @@
if (!$showAssetViewer) {
switch (event.key) {
case 'Escape':
goto(previousRoute);
if (!$preventRaceConditionSearchBar) {
goto(previousRoute);
}
$preventRaceConditionSearchBar = false;
return;
}
}