Browse Source

Revert "Merge pull request #578 from aneopsy/fix-ams-slot"

This reverts commit d4aa77f50240f461e4f24e7e72a7d03aee05ee55, reversing
changes made to 82178f8abd3ff3ca55f79de4c0549f251e13ab69.
maziggy 2 months ago
parent
commit
277db1bd8c
1 changed files with 7 additions and 16 deletions
  1. 7 16
      frontend/src/components/ConfigureAmsSlotModal.tsx

+ 7 - 16
frontend/src/components/ConfigureAmsSlotModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
+import { useState, useMemo, useEffect, useCallback } from 'react';
 import { useQuery, useMutation } from '@tanstack/react-query';
 import { useQuery, useMutation } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { useTranslation } from 'react-i18next';
 import { X, Loader2, Settings2, ChevronDown, CheckCircle2, RotateCcw } from 'lucide-react';
 import { X, Loader2, Settings2, ChevronDown, CheckCircle2, RotateCcw } from 'lucide-react';
@@ -242,7 +242,6 @@ export function ConfigureAmsSlotModal({
   const [searchQuery, setSearchQuery] = useState('');
   const [searchQuery, setSearchQuery] = useState('');
   const [showSuccess, setShowSuccess] = useState(false);
   const [showSuccess, setShowSuccess] = useState(false);
   const [showExtendedColors, setShowExtendedColors] = useState(false);
   const [showExtendedColors, setShowExtendedColors] = useState(false);
-  const scrolledToRef = useRef<string>('');
 
 
   // Fetch cloud settings (gracefully handle 401 when logged out)
   // Fetch cloud settings (gracefully handle 401 when logged out)
   const { data: cloudSettings, isLoading: settingsLoading, isError: cloudError } = useQuery({
   const { data: cloudSettings, isLoading: settingsLoading, isError: cloudError } = useQuery({
@@ -736,7 +735,6 @@ export function ConfigureAmsSlotModal({
       setColorInput('');
       setColorInput('');
       setSearchQuery('');
       setSearchQuery('');
       setShowSuccess(false);
       setShowSuccess(false);
-      scrolledToRef.current = '';
     }
     }
   }, [isOpen, slotInfo.savedPresetId, slotInfo.trayInfoIdx, slotInfo.trayColor, cloudSettings?.filament]);
   }, [isOpen, slotInfo.savedPresetId, slotInfo.trayInfoIdx, slotInfo.trayColor, cloudSettings?.filament]);
 
 
@@ -772,17 +770,6 @@ export function ConfigureAmsSlotModal({
     }
     }
   }, [isOpen, handleKeyDown]);
   }, [isOpen, handleKeyDown]);
 
 
-  // Scroll selected preset into view only when the selection changes (not on every render).
-  // Inline callback refs cause scrollIntoView to fire every render, which on Windows
-  // creates an infinite scroll loop due to scroll → re-render → scrollIntoView cycles.
-  useEffect(() => {
-    if (selectedPresetId && selectedPresetId !== scrolledToRef.current) {
-      scrolledToRef.current = selectedPresetId;
-      const el = document.querySelector(`[data-preset-id="${CSS.escape(selectedPresetId)}"]`);
-      el?.scrollIntoView({ block: 'nearest' });
-    }
-  }, [selectedPresetId]);
-
   if (!isOpen) return null;
   if (!isOpen) return null;
 
 
   const isLoading = (settingsLoading && !cloudError) || localLoading || builtinLoading || kprofilesLoading;
   const isLoading = (settingsLoading && !cloudError) || localLoading || builtinLoading || kprofilesLoading;
@@ -902,7 +889,9 @@ export function ConfigureAmsSlotModal({
                     filteredPresets.map((preset) => (
                     filteredPresets.map((preset) => (
                       <button
                       <button
                         key={preset.id}
                         key={preset.id}
-                        data-preset-id={preset.id}
+                        ref={selectedPresetId === preset.id ? (el) => {
+                          el?.scrollIntoView({ block: 'nearest' });
+                        } : undefined}
                         onClick={() => setSelectedPresetId(preset.id)}
                         onClick={() => setSelectedPresetId(preset.id)}
                         className={`w-full p-2 rounded-lg border text-left transition-colors ${
                         className={`w-full p-2 rounded-lg border text-left transition-colors ${
                           selectedPresetId === preset.id
                           selectedPresetId === preset.id
@@ -1137,7 +1126,9 @@ export function ConfigureAmsSlotModal({
                       filteredPresets.map((preset) => (
                       filteredPresets.map((preset) => (
                         <button
                         <button
                           key={preset.id}
                           key={preset.id}
-                          data-preset-id={preset.id}
+                          ref={selectedPresetId === preset.id ? (el) => {
+                            el?.scrollIntoView({ block: 'nearest' });
+                          } : undefined}
                           onClick={() => setSelectedPresetId(preset.id)}
                           onClick={() => setSelectedPresetId(preset.id)}
                           className={`w-full p-2 rounded-lg border text-left transition-colors ${
                           className={`w-full p-2 rounded-lg border text-left transition-colors ${
                             selectedPresetId === preset.id
                             selectedPresetId === preset.id