Skip to content

Commit

Permalink
try workaround for Safari not properly handling Enter on the filter form
Browse files Browse the repository at this point in the history
  • Loading branch information
yagebu committed May 26, 2023
1 parent bd19a36 commit 6293d09
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 7 deletions.
16 changes: 9 additions & 7 deletions frontend/src/AutocompleteInput.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
import { keyboardShortcut } from "./keyboard-shortcuts";
import { fuzzyfilter, fuzzywrap } from "./lib/fuzzy";
const dispatch = createEventDispatcher();
const dispatch = createEventDispatcher<{
blur: HTMLInputElement;
enter: HTMLInputElement;
select: HTMLInputElement;
}>();
export let value: string;
export let suggestions: string[];
Expand Down Expand Up @@ -62,12 +66,10 @@
function keydown(event: KeyboardEvent) {
if (event.key === "Enter") {
if (index > -1 && !hidden && filteredSuggestions[index]) {
const suggestion = filteredSuggestions[index]?.suggestion;
if (index > -1 && !hidden && suggestion) {
event.preventDefault();
const suggestion = filteredSuggestions[index]?.suggestion;
if (suggestion) {
select(suggestion);
}
select(suggestion);
} else {
dispatch("enter", input);
}
Expand Down Expand Up @@ -98,7 +100,7 @@
use:keyboardShortcut={key}
on:blur={() => {
hidden = true;
dispatch("blur");
dispatch("blur", input);
}}
on:focus={() => {
hidden = false;
Expand Down
11 changes: 11 additions & 0 deletions frontend/src/sidebar/FilterForm.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,14 @@
time_filter_value = v;
});
/**
* Submit the filter form.
*
* This is called on all the three possible events (blur, select, enter)
* and also on the form submit. Having the listener on:enter would
* theoretically be unnecessary (as the form would also be submitted) but
* it seems to work around a Safari bug, see #809 and #1528.
*/
function submit() {
account_filter.set(account_filter_value);
fql_filter.set(fql_filter_value);
Expand All @@ -58,6 +66,7 @@
setSize={true}
on:blur={submit}
on:select={submit}
on:enter={submit}
/>
<AutocompleteInput
bind:value={account_filter_value}
Expand All @@ -68,6 +77,7 @@
setSize={true}
on:blur={submit}
on:select={submit}
on:enter={submit}
/>
<AutocompleteInput
bind:value={fql_filter_value}
Expand All @@ -80,6 +90,7 @@
{valueSelector}
on:blur={submit}
on:select={submit}
on:enter={submit}
/>
<button type="submit" />
</form>
Expand Down

0 comments on commit 6293d09

Please sign in to comment.