Ensure Enter is correctly handled in Safari and Firefox (#9945)

* explicity handle enter

* add changeset

* add handle keydown

* fix test

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
Hannah 2024-11-21 17:33:23 +00:00 committed by GitHub
parent f2fa27058a
commit e9f0d0315d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 4 deletions

View File

@ -0,0 +1,6 @@
---
"@gradio/dataframe": patch
"gradio": patch
---
fix:Ensure Enter is correctly handled in Safari and Firefox

View File

@ -51,6 +51,14 @@
value = currentTarget.value;
dispatch("blur");
}
function handle_keydown(event: KeyboardEvent): void {
if (event.key === "Enter") {
value = _value;
dispatch("blur");
}
dispatch("keydown", event);
}
</script>
{#if edit}
@ -62,7 +70,7 @@
tabindex="-1"
on:blur={handle_blur}
use:use_focus
on:keydown
on:keydown={handle_keydown}
/>
{/if}

View File

@ -293,6 +293,11 @@
selected = [i + 1, j];
} else {
if (dequal(editing, [i, j])) {
const cell_id = data[i][j].id;
const input_el = els[cell_id].input;
if (input_el) {
data[i][j].value = input_el.value;
}
editing = false;
await tick();
selected = [i, j];
@ -392,10 +397,10 @@
select_on_focus = _select;
}
function end_header_edit(event: KeyboardEvent): void {
function end_header_edit(event: CustomEvent<KeyboardEvent>): void {
if (!editable) return;
switch (event.key) {
switch (event.detail.key) {
case "Escape":
case "Enter":
case "Tab":
@ -1227,7 +1232,7 @@
min-width: var(--size-5);
padding: 0;
margin-right: var(--spacing-sm);
z-index: var(--layer-2);
z-index: var(--layer-1);
}
.cell-menu-button:hover {