(core) Avoid editing fields on toggle dbclick

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

app/client/components/DetailView.js

@@ -473,14 +473,15 @@ DetailView.prototype._duplicateRows = async function() {
 }
 
 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 toggle (switch or checkbox)
   if (
-    field.column().isRealFormula() || field.column().hasTriggerFormula()
-    || (
-      field.column().pureType() === "Bool"
-      && ["Switch", "CheckBox"].includes(field.column().visibleColFormatter().widgetOpts.widget)
+    field.column().isRealFormula() ||
+    field.column().hasTriggerFormula() ||
+    (
+      field.column().pureType() === "Bool" &&
+      ["Switch", "CheckBox"].includes(field.visibleColFormatter().widgetOpts.widget)
     )
   ) {
     return false;

app/client/widgets/Toggle.ts

@@ -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),
       )
     );
   }