fix : bg color

components/admin/extra-sheet-editor.tsx

@@ -13,7 +13,7 @@ import {
   Trash2Icon,
 } from "lucide-react";
 import Spreadsheet, { type ColumnIndicatorProps, type DataEditorProps, type Point, type Selection } from "react-spreadsheet";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { DeleteConfirmationDialog } from "@/components/admin/delete-confirmation-dialog";
 import { RichTextContent } from "@/components/rich-text-content";
@@ -126,6 +126,7 @@ export function ExtraSheetEditor({
   const [cellDialogOpen, setCellDialogOpen] = useState(false);
   const [cellDraft, setCellDraft] = useState("");
   const [selection, setSelection] = useState<Selection | null>(null);
+  const colorSelectionRef = useRef<Point[] | null>(null);
   const matrix = useMemo(() => extraSheetToMatrix(value), [value]);
   const activeColumn = value.columns[active.column];
   const activeRow = value.rows[active.row];
@@ -224,9 +225,17 @@ export function ExtraSheetEditor({
             aria-label="เลือกสีพื้นหลังเซลล์"
             className="absolute inset-0 cursor-pointer opacity-0"
             value={activeRow?.backgrounds?.[activeColumn?.id ?? ""] ?? DEFAULT_CELL_BACKGROUND}
-            onChange={(event) => onChange(updateExtraSheetCells(value, selectedPoints(), {
+            onPointerDown={() => {
-              backgroundColor: event.target.value,
+              colorSelectionRef.current = selectedPoints();
-            }))}
+            }}
+            onChange={(event) => {
+              onChange(updateExtraSheetCells(
+                value,
+                colorSelectionRef.current ?? selectedPoints(),
+                { backgroundColor: event.target.value },
+              ));
+              colorSelectionRef.current = null;
+            }}
           />
         </label>
         <Button