Fixed grid not updating properly

client/src/pages/dashboard/components/DashboardGrid/DashboardGrid.tsx

@@ -12,7 +12,6 @@ export const DashboardGrid = () => {
 					<EditableBox
 						box={b}
 						key={b.id}
-						boxes={boxes}
 						onPosition={(p) => {
 							setBoxes((previous) =>
 								normalizeBoxes(

client/src/pages/dashboard/components/DashboardGrid/components/EditableBox.tsx

@@ -13,7 +13,6 @@ import { BoxSettings } from '../../BoxSettings/BoxSettings'
 
 type Props = {
 	box: BoxDefinition
-	boxes: BoxDefinition[]
 	onPosition: (p: { x: number; y: number }) => void
 	onResize: (p: { w: number; h: number }) => void
 	onEdit: (box: BoxDefinition) => void
@@ -22,12 +21,13 @@ type Props = {
 
 export const EditableBox = ({
 	box,
-	boxes,
 	onPosition,
 	onResize,
 	onEdit,
 	onRemove,
 }: Props) => {
+	const { boxes } = useDashboardContext()
+
 	const [boxRef, setBoxRef] = useState<HTMLDivElement>()
 	const refreshRef = useRef<() => void>(null)
 

client/src/pages/dashboard/contexts/DashboardContext.tsx

@@ -7,6 +7,7 @@ import {
 import { parseDashboard } from '@/utils/dashboard/parseDashboard'
 import { useViewportSize } from '@/utils/hooks/useViewportSize'
 import { intervalToRange } from '@/utils/intervalToRange'
+import { nextFrame } from '@/utils/nextFrame'
 import { ComponentChild, createContext } from 'preact'
 import {
 	StateUpdater,
@@ -62,9 +63,15 @@ export const DashboardContextProvider = ({
 	const [boxes, setBoxes] = useState(dashboardContent?.boxes ?? [])
 
 	const handleChange = useCallback(
-		(cb: (boxes: BoxDefinition[]) => BoxDefinition[]) => {
+		async (cb: (boxes: BoxDefinition[]) => BoxDefinition[]) => {
 			const newBoxes = cb(boxes)
 
+			// Some nasty preact optimizations will result into the updated box
+			// not being updated unless we make this async. Probably because
+			// the modified box called this cb and it decided that it doesn't
+			// need to know the update result?
+			await nextFrame()
+
 			setBoxes(newBoxes)
 
 			if (dashboard.data && dashboardContent) {
@@ -77,7 +84,7 @@ export const DashboardContextProvider = ({
 				})
 			}
 		},
-		[dashboard.data]
+		[dashboard.data, boxes, dashboardContent]
 	)
 
 	useEffect(() => {

client/src/utils/nextFrame.ts

@@ -0,0 +1,2 @@
+export const nextFrame = () =>
+	new Promise((resolve) => requestAnimationFrame(resolve))