AG-10884 - Vue change batching fix

ag-grid · May 15, 2024 · 5086ca0 · 5086ca0
1 parent 2bd7176
commit 5086ca0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 28 deletions.
diff --git a/community-modules/core/src/gridApi.ts b/community-modules/core/src/gridApi.ts
@@ -1982,8 +1982,8 @@ export class GridApi<TData = any> {
     }
 
     /** Used internally by grid. Not intended to be used by the client. Interface may change between releases. */
-    public __internalUpdateGridOptions(options: GridOptions): void {
-        this.gos.updateGridOptions({ options, source: 'gridOptionsUpdated' });
+    public __internalUpdateGridOptions(options: GridOptions, force?: boolean): void {
+        this.gos.updateGridOptions({ options, force, source: 'gridOptionsUpdated' });
     }
 
     private deprecatedUpdateGridOption<K extends keyof GridOptions & ManagedGridOptionKey>(key: K, value: GridOptions<TData>[K]) {

diff --git a/community-modules/core/src/gridOptionsService.ts b/community-modules/core/src/gridOptionsService.ts
@@ -237,7 +237,7 @@ export class GridOptionsService {
     }
 
     private static changeSetId = 0;
-    public updateGridOptions({ options, source = 'api' }: { options: Partial<GridOptions>, source?: PropertyChangedSource }): void {
+    public updateGridOptions({ options, force, source = 'api' }: { options: Partial<GridOptions>, force?: boolean, source?: PropertyChangedSource }): void {
         const changeSet: PropertyChangeSet = { id: GridOptionsService.changeSetId++, properties: [] };
         // all events are fired after grid options has finished updating.
         const events: PropertyValueChangedEvent<keyof GridOptions>[] = [];
@@ -246,7 +246,7 @@ export class GridOptionsService {
                 warnOnce(`${key} is an initial property and cannot be updated.`)
             }
             const coercedValue = GridOptionsService.getCoercedValue(key as keyof GridOptions, value);
-            const shouldForce = (typeof coercedValue) === 'object' && source === 'api'; // force objects as they could have been mutated.
+            const shouldForce = force || ((typeof coercedValue) === 'object' && source === 'api'); // force objects as they could have been mutated.
 
             const previousValue = this.gridOptions[key as keyof GridOptions];
             if (shouldForce || previousValue !== coercedValue) {

diff --git a/community-modules/vue3/src/Utils.ts b/community-modules/vue3/src/Utils.ts
@@ -22,18 +22,8 @@ export const getAgGridProperties = (): [Properties, Properties, Properties] => {
     const eventNameAsProps = ComponentUtil.PUBLIC_EVENTS.map((eventName: string) => kebabNameToAttrEventName(kebabProperty(eventName)));
     eventNameAsProps.forEach((eventName: string) => props[eventName] = undefined)
 
-    const computed: Properties = {
-        props() {
-            const options: { [key: string]: any } = {};
-            ComponentUtil.ALL_PROPERTIES.forEach((propertyName: string) => {
-                if (this[propertyName] === ComponentUtil.VUE_OMITTED_PROPERTY) { return; }
-                if (propertyName in this || propertyName in this.gridOptions) {
-                    options[propertyName] = this[propertyName] ?? this.gridOptions[propertyName];
-                }
-            });
-            return options;
-        },
-    };
+    const computed: Properties = {};
+
     const watch: Properties = {
         modelValue: {
             handler(currentValue: any, previousValue: any) {
@@ -55,25 +45,29 @@ export const getAgGridProperties = (): [Properties, Properties, Properties] => {
             },
             deep: true
         },
-        props: {
-            handler(currentValue: any, previousValue: any) {
-                if (!this.gridCreated || !this.api) { return; }
-                const changes: any = {};
-                Object.entries(currentValue).forEach(([key, value]) => {
-                    if (previousValue[key] === value) return;
-                    changes[key] = value;
-                });
-                ComponentUtil.processOnChange(changes, this.api);
-            },
-            deep: true,
-        },
     };
+    let timeout: number | null = null;
+    let changes: { [key: string]: any } = {};
     ComponentUtil.ALL_PROPERTIES
         .filter((propertyName: string) => propertyName != 'gridOptions') // dealt with in AgGridVue itself
         .forEach((propertyName: string) => {
             props[propertyName] = {
                 default: ComponentUtil.VUE_OMITTED_PROPERTY,
             };
+
+            watch[propertyName] = {
+                handler(currentValue: any, previousValue: any) {
+                    changes[propertyName] = currentValue === ComponentUtil.VUE_OMITTED_PROPERTY ? undefined : currentValue;
+                    if (timeout == null) {
+                        timeout = setTimeout(() => {
+                            ComponentUtil.processOnChange(changes, this.api);
+                            timeout = null;
+                            changes = {};
+                        }, 0);
+                    }
+                },
+                deep: true,
+            }
         });
 
     return [props, computed, watch];