Fix field options on select related row modal (baserow#4755)

Author: dimmur-brw

web-frontend/modules/database/components/row/SelectRowContent.vue

@@ -233,20 +233,24 @@ export default {
         return
       }
 
-      // Remove the not existing keys because the related fields might have been
-      // deleted in the meantime, and so we're keeping the local storage clean.
+      // Remove entries for fields that no longer exist in the table, keeping
+      // IndexedDB clean. Uses allFields (the actual table fields) instead of
+      // fieldOptions (grid view API response) which may be empty or incomplete.
+      const existingFieldIds = new Set(
+        this.allFields.map((field) => field.id.toString())
+      )
       value = Object.fromEntries(
-        Object.entries(value).filter((key) => {
-          return Object.prototype.hasOwnProperty.call(this.fieldOptions, key[0])
-        })
+        Object.entries(value).filter(([key]) => existingFieldIds.has(key))
       )
 
       try {
+        // clone() strips Vue 3 Proxy wrappers so the value can be stored via
+        // IndexedDB's structured clone algorithm.
         await setData(
           databaseName,
           storeName,
           this.persistentFieldOptionsKey,
-          value
+          clone(value)
         )
       } catch (error) {
         /* empty */
@@ -267,6 +271,17 @@ export default {
 
     await this.orderFieldsByFirstGridViewFieldOptions(this.tableId)
 
+    if (this.persistentFieldOptionsKey) {
+      try {
+        const override = await getData(
+          databaseName,
+          storeName,
+          this.persistentFieldOptionsKey
+        )
+        this.fieldOptionsOverride = override || {}
+      } catch (error) {}
+    }
+
     // Because the page data depends on having some initial metadata we mark the state
     // as loaded after that. Only a loading animation is shown if there isn't any
     // data.
@@ -338,15 +353,6 @@ export default {
           data: { field_options: fieldOptions },
         } = await ViewService(this.$client).fetchFieldOptions(views[0].id)
         this.fieldOptions = fieldOptions
-
-        if (this.persistentFieldOptionsKey) {
-          const override = await getData(
-            databaseName,
-            storeName,
-            this.persistentFieldOptionsKey
-          )
-          this.fieldOptionsOverride = override || {}
-        }
       } catch (error) {
         notifyIf(error, 'view')
       }