Merge branch '2628-table-cell-requires-2-clicks-to-enter' into 'develop'

Resolve "Table cell requires 2+ clicks to enter"

Closes #2628

See merge request baserow/baserow!2707

changelog/entries/unreleased/refactor/2628_use_dblclick_event_instead_of_checking_ellapsed_time_for_dou.json

@@ -0,0 +1,7 @@
+{
+    "type": "refactor",
+    "message": "Use dblclick event instead of checking ellapsed time for double-click.",
+    "issue_number": 2628,
+    "bullet_points": [],
+    "created_at": "2024-09-17"
+}

web-frontend/modules/database/mixins/gridField.js

@@ -26,15 +26,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      /**
-       * Timestamp of the last the time the user clicked on the field. We need this to
-       * check if it was double clicked.
-       */
-      clickTimestamp: null,
-    }
-  },
   watch: {
     /**
      * It could happen that the cell is not select, but still being kept alive to
@@ -81,18 +72,11 @@ export default {
      * remove the event listeners when the cell is unselected.
      */
     setupAllEventListenersOnCellSelected() {
-      const clickEventListener = (event) => {
-        const timestamp = new Date().getTime()
-        if (
-          this.clickTimestamp !== null &&
-          timestamp - this.clickTimestamp < 200
-        ) {
-          this.doubleClick(event)
-        }
-
-        this.clickTimestamp = timestamp
-      }
-      this.addEventListenerWithAutoRemove(this.$el, 'click', clickEventListener)
+      this.addEventListenerWithAutoRemove(
+        this.$el,
+        'dblclick',
+        this.doubleClick
+      )
 
       // Register a body click event listener so that we can detect if a user has
       // clicked outside the field. If that happens we want to unselect the field and
@@ -249,7 +233,6 @@ export default {
      */
     _select() {
       this.setupAllEventListenersOnCellSelected()
-      this.clickTimestamp = new Date().getTime()
       this.select()
 
       // Emit the selected event so that the parent component can take an action like

web-frontend/test/helpers/testApp.js

@@ -291,8 +291,7 @@ export const UIHelpers = {
 
     const activeCell = tableComponent.get('.grid-view__cell.active')
     // Double click to start editing cell
-    await activeCell.trigger('click')
-    await activeCell.trigger('click')
+    await activeCell.trigger('dblclick')
 
     return activeCell.find('input')
   },