Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-09-30 03:40:49 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/client/components/DetailView.js
View File

@ -473,14 +473,15 @@ DetailView.prototype._duplicateRows = async function() {
} }
DetailView.prototype._canSingleClick = function(field) { DetailView.prototype._canSingleClick = function(field) {
// we can't simple click if : // we can't single click if :
// - the field is a formula // - the field is a formula
// - the field is toggle (switch or checkbox) // - the field is toggle (switch or checkbox)
if ( if (
field.column().isRealFormula() || field.column().hasTriggerFormula() field.column().isRealFormula() ||
|| ( field.column().hasTriggerFormula() ||
field.column().pureType() === "Bool" (
&& ["Switch", "CheckBox"].includes(field.column().visibleColFormatter().widgetOpts.widget) field.column().pureType() === "Bool" &&
["Switch", "CheckBox"].includes(field.visibleColFormatter().widgetOpts.widget)
) )
) { ) {
return false; return false;

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. * ToggleBase - The base class for toggle widgets, such as a checkbox or a switch.
*/ */
abstract class ToggleBase extends NewAbstractWidget { abstract class ToggleBase extends NewAbstractWidget {
protected _addClickEventHandler(row: DataRowModel) { protected _addClickEventHandlers(row: DataRowModel) {
return dom.on('click', (event) => { return [
if (event.shiftKey) { dom.on('click', (event) => {
// Shift-click is for selection, don't also toggle the checkbox during it. if (event.shiftKey) {
return; // 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 if (!this.field.column().isRealFormula()) {
// flow which is handled by CheckBoxEditor.skipEditor(). This way the edit applies to // Move the cursor here, and pretend that spacebar was pressed. This triggers an editing
// editRow, which handles setting default values based on widget linking. // flow which is handled by CheckBoxEditor.skipEditor(). This way the edit applies to
commands.allCommands.setCursor.run(row, this.field); // editRow, which handles setting default values based on widget linking.
commands.allCommands.input.run(' '); 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_kick'),
dom('div.checkmark_stem') 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.cls('switch_transition', row._isRealChange),
dom('div.switch_slider'), dom('div.switch_slider'),
dom('div.switch_circle'), dom('div.switch_circle'),
this._addClickEventHandler(row), this._addClickEventHandlers(row),
) )
); );
} }