self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-02-04 18:35:31 +02:00
Code Issues Releases 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 Magnify from 'svelte-material-icons/Magnify.svelte';
import Close from 'svelte-material-icons/Close.svelte'; import Close from 'svelte-material-icons/Close.svelte';
import { goto } from '$app/navigation'; 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 { fly } from 'svelte/transition';
import { clickOutside } from '$lib/utils/click-outside'; import { clickOutside } from '$lib/utils/click-outside';
export let value = ''; export let value = '';
@ -23,8 +23,8 @@
searchValue = value.slice(2); searchValue = value.slice(2);
} }
$savedSearchTerms = $savedSearchTerms.filter((item) => item !== searchValue); $savedSearchTerms = $savedSearchTerms.filter((item) => item !== value);
saveSearchTerm(searchValue); saveSearchTerm(value);
const params = new URLSearchParams({ const params = new URLSearchParams({
q: searchValue, q: searchValue,
@ -59,12 +59,16 @@
}; };
const onFocusOut = () => { const onFocusOut = () => {
if ($isSearchEnabled) {
$preventRaceConditionSearchBar = true;
}
showBigSearchBar = false; showBigSearchBar = false;
$isSearchEnabled = false; $isSearchEnabled = false;
}; };
</script> </script>
<button class="w-full" use:clickOutside on:outclick={onFocusOut}> <div role="button" class="w-full" use:clickOutside on:outclick={onFocusOut}>
<form <form
draggable="false" draggable="false"
autocomplete="off" autocomplete="off"
@ -160,4 +164,4 @@
</div> </div>
{/if} {/if}
</form> </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 savedSearchTerms = persisted<string[]>('search-terms', [], {});
export const isSearchEnabled = writable<boolean>(false); 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 { onDestroy, onMount } from 'svelte';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { assetViewingStore } from '$lib/stores/asset-viewing.store'; import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { preventRaceConditionSearchBar } from '$lib/stores/search.store';
export let data: PageData; export let data: PageData;
@ -53,7 +54,10 @@
if (!$showAssetViewer) { if (!$showAssetViewer) {
switch (event.key) { switch (event.key) {
case 'Escape': case 'Escape':
goto(previousRoute); if (!$preventRaceConditionSearchBar) {
goto(previousRoute);
}
$preventRaceConditionSearchBar = false;
return; return;
} }
} }