Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

(core) Avoid editing fields on toggle dbclick

Browse Source 
Summary:
This prevents a quirky UI behavior where double-clicking a toggle would cause
the field to start being edited.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D4093
This commit is contained in:
George Gevoian
2023-10-25 11:04:40 -04:00
parent 4e67c679b2
commit ce23887be0
2 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app/client/widgets/Toggle.ts
View File

@@ -10,20 +10,27 @@ import { dom } from 'grainjs';
* ToggleBase - The base class for toggle widgets, such as a checkbox or a switch.
*/
abstract class ToggleBase extends NewAbstractWidget {
protected _addClickEventHandler(row: DataRowModel) {
return dom.on('click', (event) => {
if (event.shiftKey) {
// Shift-click is for selection, don't also toggle the checkbox during it.
return;
}
if (!this.field.column().isRealFormula()) {
// Move the cursor here, and pretend that spacebar was pressed. This triggers an editing
// flow which is handled by CheckBoxEditor.skipEditor(). This way the edit applies to
// editRow, which handles setting default values based on widget linking.
commands.allCommands.setCursor.run(row, this.field);
commands.allCommands.input.run(' ');
}
});
protected _addClickEventHandlers(row: DataRowModel) {
return [
dom.on('click', (event) => {
if (event.shiftKey) {
// Shift-click is for selection, don't also toggle the checkbox during it.
return;
}
if (!this.field.column().isRealFormula()) {
// Move the cursor here, and pretend that spacebar was pressed. This triggers an editing
// flow which is handled by CheckBoxEditor.skipEditor(). This way the edit applies to
// editRow, which handles setting default values based on widget linking.
commands.allCommands.setCursor.run(row, this.field);
commands.allCommands.input.run(' ');
}
}),
dom.on('dblclick', (event) => {
// Don't start editing the field when a toggle is double-clicked.
event.stopPropagation();
event.preventDefault();
}),
];
}
}
@@ -41,7 +48,7 @@ export class ToggleCheckBox extends ToggleBase {
dom('div.checkmark_kick'),
dom('div.checkmark_stem')
),
this._addClickEventHandler(row),
this._addClickEventHandlers(row),
)
);
}
@@ -60,7 +67,7 @@ export class ToggleSwitch extends ToggleBase {
dom.cls('switch_transition', row._isRealChange),
dom('div.switch_slider'),
dom('div.switch_circle'),
this._addClickEventHandler(row),
this._addClickEventHandlers(row),
)
);
}