Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-05-31 12:15:47 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): search bar deactivates when focus exits (#17549)

Browse Source 
* fix(web): search bar deactivates when focus exits

* fix: disable search bar on destroy

For example, on the search page. If the escape key is pressed while the advanced filters button is focused, the search page will close but the search bar will remain activated.
This commit is contained in:
Ben 2025-04-13 23:43:50 -04:00 committed by GitHub
parent 983f656a6b
commit 79d4ce2d6d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 7 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte'; import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import { generateId } from '$lib/utils/generate-id'; import { generateId } from '$lib/utils/generate-id';
import { tick } from 'svelte'; import { onDestroy, tick } from 'svelte';
interface Props { interface Props {
value?: string; value?: string;
@ -35,6 +35,10 @@
const listboxId = generateId(); const listboxId = generateId();
onDestroy(() => {
searchStore.isSearchEnabled = false;
});
const handleSearch = async (payload: SmartSearchDto | MetadataSearchDto) => { const handleSearch = async (payload: SmartSearchDto | MetadataSearchDto) => {
const params = getMetadataSearchQuery(payload); const params = getMetadataSearchQuery(payload);
@ -70,17 +74,7 @@
}; };
const onFocusOut = () => { const onFocusOut = () => {
const focusOutTimer = setTimeout(() => { searchStore.isSearchEnabled = false;
if (searchStore.isSearchEnabled) {
searchStore.preventRaceConditionSearchBar = true;
}
closeDropdown();
searchStore.isSearchEnabled = false;
showFilter = false;
}, 100);
clearTimeout(focusOutTimer);
}; };
const onHistoryTermClick = async (searchTerm: string) => { const onHistoryTermClick = async (searchTerm: string) => {

2
web/src/lib/stores/search.svelte.ts
View File

@ -1,12 +1,10 @@
class SearchStore { class SearchStore {
savedSearchTerms = $state<string[]>([]); savedSearchTerms = $state<string[]>([]);
isSearchEnabled = $state(false); isSearchEnabled = $state(false);
preventRaceConditionSearchBar = $state(false);
clearCache() { clearCache() {
this.savedSearchTerms = []; this.savedSearchTerms = [];
this.isSearchEnabled = false; this.isSearchEnabled = false;
this.preventRaceConditionSearchBar = false;
} }
} }

6
web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -19,7 +19,6 @@
import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte'; import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
import { AppRoute, QueryParameter } from '$lib/constants'; import { AppRoute, QueryParameter } from '$lib/constants';
import { assetViewingStore } from '$lib/stores/asset-viewing.store'; import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { searchStore } from '$lib/stores/search.svelte';
import { shortcut } from '$lib/actions/shortcut'; import { shortcut } from '$lib/actions/shortcut';
import { import {
type AlbumResponseDto, type AlbumResponseDto,
@ -88,10 +87,7 @@
assetInteraction.selectedAssets = []; assetInteraction.selectedAssets = [];
return; return;
} }
if (!searchStore.preventRaceConditionSearchBar) { handlePromiseError(goto(previousRoute));
handlePromiseError(goto(previousRoute));
}
searchStore.preventRaceConditionSearchBar = false;
}; };
$effect(() => { $effect(() => {