diff --git a/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts b/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts index b6d90f6d6..6d0519c2b 100644 --- a/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts +++ b/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts @@ -1,5 +1,5 @@ import { GridItemHTMLElement, GridStack, GridStackNode } from 'fily-publish-gridstack'; -import { MutableRefObject, RefObject } from 'react'; +import { MutableRefObject, RefObject, useEffect } from 'react'; import { AppType } from '../../../../types/app'; import { ShapeType } from '../../../../types/shape'; import { IWidget } from '../../../../widgets/widgets'; @@ -45,7 +45,7 @@ export const initializeGridstack = ( ); const grid = newGrid.current; // Must be used to update the column count after the initialization - grid.column(columnCount); + grid.column(columnCount, 'none'); // Add listener for moving items around in a wrapper grid.on('change', (_, el) => { diff --git a/src/components/Dashboard/Wrappers/gridstack/store.tsx b/src/components/Dashboard/Wrappers/gridstack/store.tsx index 59c0a7deb..6df8c2f75 100644 --- a/src/components/Dashboard/Wrappers/gridstack/store.tsx +++ b/src/components/Dashboard/Wrappers/gridstack/store.tsx @@ -1,6 +1,5 @@ import { useMantineTheme } from '@mantine/core'; import create from 'zustand'; -import { useConfigContext } from '../../../../config/provider'; export const useGridstackStore = create((set, get) => ({ mainAreaWidth: null, diff --git a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts index 8a87cca8a..bb0e2adb5 100644 --- a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts +++ b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts @@ -232,6 +232,11 @@ export const useGridstack = ( // initialize the gridstack useEffect(() => { + const removeEventHandlers = () => { + gridRef.current?.off('change'); + gridRef.current?.off('added'); + }; + const tilesWithUnknownLocation: TileWithUnknownLocation[] = []; initializeGridstack( areaType, @@ -250,7 +255,7 @@ export const useGridstack = ( onAdd, } ); - if (!configName) return; + if (!configName) return removeEventHandlers; updateConfig(configName, (prev) => ({ ...prev, apps: prev.apps.map((app) => { @@ -300,6 +305,7 @@ export const useGridstack = ( }; }), })); + return removeEventHandlers; }, [items, wrapperRef.current, widgets, wrapperColumnCount]); return {