Skip to content

Submit custom search on enter #489

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
valentin9 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Submit custom search on enter #489

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 18 additions & 16 deletions web/src/lib/components/download-dialogs/download-custom-dialog.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
let queryOverride: string = $state('');
let filePathSuffix: string = $state('');

let torrentsPromise: any = $state();

Check warning on line 24 in web/src/lib/components/download-dialogs/download-custom-dialog.svelte

View workflow job for this annotation

GitHub Actions / Lint Frontend 

Unexpected any. Specify a different type
let torrentsData: any[] | null = $state(null);

Check warning on line 25 in web/src/lib/components/download-dialogs/download-custom-dialog.svelte

View workflow job for this annotation

GitHub Actions / Lint Frontend 

Unexpected any. Specify a different type
let isLoading: boolean = $state(false);

const tableColumnHeadings = [
Expand Down Expand Up @@ -107,22 +107,24 @@
description="Search and download torrents using a fully custom query string."
>
<div class="grid w-full items-center gap-1.5">
<Label for="query-override">Enter a custom query</Label>

<div class="flex w-full max-w-sm items-center space-x-2">
<Input
bind:value={queryOverride}
id="query-override"
type="text"
placeholder={`e.g. ${getFullyQualifiedMediaName(show)} S01 1080p BluRay`}
/>
<Button disabled={isLoading} class="w-fit" onclick={search}>Search</Button>
</div>

<p class="text-sm text-muted-foreground">
The custom query completely overrides the default search logic. Make sure the torrent title
matches the episodes you want imported.
</p>
<form on:submit|preventDefault={search}>
<Label for="query-override">Enter a custom query</Label>

<div class="flex w-full max-w-sm items-center space-x-2">
<Input
bind:value={queryOverride}
id="query-override"
type="text"
placeholder={`e.g. ${getFullyQualifiedMediaName(show)} S01 1080p BluRay`}
/>
<Button disabled={isLoading} class="w-fit" type="submit">Search</Button>
</div>

<p class="text-sm text-muted-foreground">
The custom query completely overrides the default search logic. Make sure the torrent title
matches the episodes you want imported.
</p>
</form>
Comment on lines +110 to +127
Copy link
Copy Markdown
Contributor

@juandbc juandbc Apr 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is better to use the onkeydown event attribute on the Input element instead of adding a form element. Thus, you can handle the isLoading status.

Suggested change
<form on:submit|preventDefault={search}>
<Label for="query-override">Enter a custom query</Label>
<div class="flex w-full max-w-sm items-center space-x-2">
<Input
bind:value={queryOverride}
id="query-override"
type="text"
placeholder={`e.g. ${getFullyQualifiedMediaName(show)} S01 1080p BluRay`}
/>
<Button disabled={isLoading} class="w-fit" type="submit">Search</Button>
</div>
<p class="text-sm text-muted-foreground">
The custom query completely overrides the default search logic. Make sure the torrent title
matches the episodes you want imported.
</p>
</form>
<Label for="query-override">Enter a custom query</Label>
<div class="flex w-full max-w-sm items-center space-x-2">
<Input
bind:value={queryOverride}
id="query-override"
type="text"
placeholder={`e.g. ${getFullyQualifiedMediaName(show)} S01 1080p BluRay`}
onkeydown={(e) => { if (e.key === 'Enter' && !isLoading) search(); }}
/>
<Button disabled={isLoading} class="w-fit" type="submit">Search</Button>
</div>
<p class="text-sm text-muted-foreground">
The custom query completely overrides the default search logic. Make sure the torrent title
matches the episodes you want imported.
</p>

Copy link
Copy Markdown
Author

@valentin9 valentin9 Apr 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason I went with a form was mainly accessibility. But I probably it's too far-fetched of a reason at the moment and the target audience is unlikely to be visually impaired 😆

The loading state can be added independently of the form/onkeydown approach though.

Since the accessibility can be addressed at any point later if it ever becomes relevant, I'll update it using the onkeydown to match the codebase 👍

</div>

{#if torrentsError}
Expand Down
Loading