Merge branch 'fix-grid-glitch' into 'develop'

Fix glitch

See merge request baserow/baserow!3138

web-frontend/modules/database/components/view/grid/GridView.vue

@@ -799,6 +799,7 @@ export default {
             field,
             value,
             oldValue,
+            isRowOpenedInModal: this.isRowOpenedInModal,
           }
         )
       } catch (error) {
@@ -907,6 +908,7 @@ export default {
             values,
             before,
             selectPrimaryCell: true,
+            isRowOpenedInModal: this.isRowOpenedInModal,
           }
         )
       } catch (error) {
@@ -925,6 +927,7 @@ export default {
             fields: this.fields,
             rows: Array.from(Array(rowsAmount)).map(() => ({})),
             selectPrimaryCell: true,
+            isRowOpenedInModal: this.isRowOpenedInModal,
           }
         )
       } catch (error) {
@@ -1068,6 +1071,16 @@ export default {
         field,
       })
     },
+    /**
+     * This function helps the store determine whether it is safe to hide a row. Since
+     * some filters or groups may depend on values computed in the backend, the store
+     * needs to know if a row that does not meet the filters can be safely hidden when
+     * the values become available or if it should remain visible until the modal is
+     * closed.
+     */
+    isRowOpenedInModal(row) {
+      return this.$store.getters['rowModalNavigation/getRow']?.id === row.id
+    },
     /**
      * When a cell is unselected need to change the selected state of the row.
      */
@@ -1104,7 +1117,7 @@ export default {
             row,
             field,
             getScrollTop,
-            isRowOpenedInModal: this.rowOpenedInModal?.id === row.id,
+            isRowOpenedInModal: this.isRowOpenedInModal,
           }
         )
       })

web-frontend/modules/database/store/view/grid.js

@@ -1739,7 +1739,7 @@ export const actions = {
    */
   removeRowSelectedBy(
     { dispatch, commit },
-    { grid, row, field, fields, getScrollTop, isRowOpenedInModal = false }
+    { grid, row, field, fields, getScrollTop, isRowOpenedInModal = undefined }
   ) {
     commit('REMOVE_ROW_SELECTED_BY', { row, fieldId: field.id })
     dispatch('refreshRow', {
@@ -1776,6 +1776,7 @@ export const actions = {
       values = {},
       before = null,
       selectPrimaryCell = false,
+      isRowOpenedInModal = undefined,
     }
   ) {
     await dispatch('createNewRows', {
@@ -1785,11 +1786,20 @@ export const actions = {
       rows: [values],
       before,
       selectPrimaryCell,
+      isRowOpenedInModal,
     })
   },
   async createNewRows(
     { commit, getters, dispatch, state },
-    { view, table, fields, rows = {}, before = null, selectPrimaryCell = false }
+    {
+      view,
+      table,
+      fields,
+      rows = {},
+      before = null,
+      selectPrimaryCell = false,
+      isRowOpenedInModal = undefined,
+    }
   ) {
     // Create an object of default field values that can be used to fill the row with
     // missing default values
@@ -1963,7 +1973,12 @@ export const actions = {
           // `refreshRow` that shows/hide the row.
           const row = getters.getRow(rowId)
           if (row && !row._.selected) {
-            dispatch('refreshRow', { grid: view, row, fields })
+            dispatch('refreshRow', {
+              grid: view,
+              row,
+              fields,
+              isRowOpenedInModal,
+            })
           }
         }, REFRESH_ROW_DELAY)
       }
@@ -2173,7 +2188,16 @@ export const actions = {
    */
   async updateRowValue(
     { commit, dispatch, getters },
-    { table, view, row, field, fields, value, oldValue }
+    {
+      table,
+      view,
+      row,
+      field,
+      fields,
+      value,
+      oldValue,
+      isRowOpenedInModal = undefined,
+    }
   ) {
     /**
      * This helper function will make sure that the values of the related row are
@@ -2245,15 +2269,15 @@ export const actions = {
       fields,
       getters.getActiveSearchTerm
     )
+    if (!canUpdateOptimistically) {
+      commit('SET_ROW_LOADING', { row, value: true })
+    }
 
     // When possible update the values before making a request to the backend to make
     // it feel instant for the user. If we can't safely do it in the frontend, then
     // we have to show a loading state and update the row after the request has been
     // made.
     await updateValues(newRowValues, canUpdateOptimistically)
-    if (!canUpdateOptimistically) {
-      commit('SET_ROW_LOADING', { row, value: true })
-    }
 
     try {
       // Add the update actual update function to the queue so that the same row
@@ -2286,7 +2310,12 @@ export const actions = {
             // row.
             const row = getters.getRow(rowId)
             if (row && !row._.selected) {
-              dispatch('refreshRow', { grid: view, row, fields })
+              dispatch('refreshRow', {
+                grid: view,
+                row,
+                fields,
+                isRowOpenedInModal,
+              })
             }
           }, REFRESH_ROW_DELAY)
         }
@@ -2295,6 +2324,9 @@ export const actions = {
         })
       }, row._.persistentId)
     } catch (error) {
+      if (!canUpdateOptimistically) {
+        commit('SET_ROW_LOADING', { row, value: false })
+      }
       await updateValues(oldRowValues, true)
       throw error
     }
@@ -2986,7 +3018,7 @@ export const actions = {
       rowId,
       fields,
       getScrollTop = undefined,
-      isRowOpenedInModal = false,
+      isRowOpenedInModal = undefined,
     }
   ) {
     const row = getters.getRow(rowId)
@@ -3008,14 +3040,19 @@ export const actions = {
    */
   async refreshRow(
     { dispatch, commit },
-    { grid, row, fields, getScrollTop = undefined, isRowOpenedInModal = false }
+    {
+      grid,
+      row,
+      fields,
+      getScrollTop = undefined,
+      isRowOpenedInModal = undefined,
+    }
   ) {
-    const rowShouldBeHidden = !row._.matchFilters || !row._.matchSearch
+    const rowShouldBeHidden =
-    if (
+      (!row._.matchFilters || !row._.matchSearch) && !row._.loading
-      row._.selectedBy.length === 0 &&
+    const openedInModal =
-      rowShouldBeHidden &&
+      isRowOpenedInModal !== undefined ? isRowOpenedInModal(row) : false
-      !isRowOpenedInModal
+    if (row._.selectedBy.length === 0 && rowShouldBeHidden && !openedInModal) {
-    ) {
       commit('DELETE_ROW_IN_BUFFER', row)
     } else if (row._.selectedBy.length === 0 && !row._.matchSortings) {
       await dispatch('updatedExistingRow', {