Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Keep focus when canceling choice rename

Browse Source 
Summary:
Small bug fix that ensures focus isn't lost when Escape is pressed
while renaming a choice. This now makes it possible to close the
editor with a subsequent press of Escape.

Test Plan: Browser test.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3556
This commit is contained in:
George Gevoian 2022-08-01 00:03:59 -07:00
parent e430748c12
commit d12b05abcb
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/client/widgets/ChoiceListEntry.ts
View File

@ -293,7 +293,7 @@ export class ChoiceListEntry extends Disposable {
focus(tokenField.getTextInput()); focus(tokenField.getTextInput());
}; };
return cssColorAndLabel( const tokenColorAndLabel: HTMLDivElement = cssColorAndLabel(
dom.autoDispose(fillColorObs), dom.autoDispose(fillColorObs),
dom.autoDispose(textColorObs), dom.autoDispose(textColorObs),
dom.autoDispose(choiceText), dom.autoDispose(choiceText),
@ -335,9 +335,13 @@ export class ChoiceListEntry extends Disposable {
dom.on('copy', stopPropagation), dom.on('copy', stopPropagation),
dom.on('cut', stopPropagation), dom.on('cut', stopPropagation),
dom.on('paste', stopPropagation), dom.on('paste', stopPropagation),
// On enter, focus on the input element.
dom.onKeyDown({ dom.onKeyDown({
Enter : focusOnNew // On enter, focus on the input element.
Enter : focusOnNew,
// On escape, focus on the token (i.e. the parent node of this element). That way
// the browser will scroll the view if needed, and a subsequent escape will close
// the editor.
Escape: () => tokenColorAndLabel.parentElement?.focus(),
}), }),
// Don't bubble up click, as it would change focus. // Don't bubble up click, as it would change focus.
dom.on('click', stopPropagation), dom.on('click', stopPropagation),
@ -346,6 +350,11 @@ export class ChoiceListEntry extends Disposable {
args: [dom.cls(cssEditableLabel.className)], args: [dom.cls(cssEditableLabel.className)],
}), }),
); );
return [
tokenColorAndLabel,
dom.onKeyDown({Escape$: () => this._cancel()}),
];
} }
} }
@ -464,6 +473,9 @@ const cssToken = styled(cssListRow, `
.${cssTokenField.className}.token-dragactive & { .${cssTokenField.className}.token-dragactive & {
cursor: unset; cursor: unset;
} }
&:focus {
outline: none;
}
`); `);
const cssTokenColorInactive = styled('div', ` const cssTokenColorInactive = styled('div', `