From 54c1ee9e9439272666869fc307b793e6932610b6 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Tue, 28 Jul 2026 18:35:49 +0700
Subject: [PATCH] fix: use selectedItemIdsRef in keyboard handler to fix stale
 closure

Keyboard handler useEffect has empty deps [], so selectedItemIds was
always captured as empty Set. Added selectedItemIdsRef to keep live
reference, matching pattern used by selectedClipIdRef.
---
 app/static/js/app.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/static/js/app.jsx b/app/static/js/app.jsx
index bef5991..224ee55 100644
--- a/app/static/js/app.jsx
+++ b/app/static/js/app.jsx
@@ -6958,6 +6958,8 @@ const App = () => {
   // BMP for Tempo Track - LOOP_EDITOR_2.md §6
   const [selectedTrackId, setSelectedTrackId] = useState('1');
   const [selectedItemIds, setSelectedItemIds] = useState(new Set());
+  const selectedItemIdsRef = useRef(new Set());
+  selectedItemIdsRef.current = selectedItemIds;
   const [currentTime, setCurrentTime] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
   const [selectionStart, setSelectionStart] = useState(null);
@@ -8158,9 +8160,10 @@ const App = () => {
         return;
       }
        if (e.key === 'Delete' || e.key === 'Backspace' || e.key === 'Del') {
-         if (selectedItemIds && selectedItemIds.size > 0) {
+         const selItems = selectedItemIdsRef.current;
+         if (selItems.size > 0) {
            e.preventDefault();
-           const idsToDelete = new Set(selectedItemIds);
+           const idsToDelete = new Set(selItems);
            setSelectedItemIds(new Set());
            updateActiveTracks(prev => prev.map(t => {
              let changed = false;