Cursor issue on iOS fixed

Author: niyamax

src/components/GitSequencer.css

@@ -207,16 +207,12 @@
     background: var(--success);
     pointer-events: none;
     z-index: 1;
-    opacity: 0;
-    transition: left 0.05s ease-out;
-}
-
-/* Show and blink cursor when input is focused */
-.input-wrapper:focus-within .terminal-cursor {
     opacity: 0.85;
     animation: blink-cursor 1s step-end infinite;
+    transition: left 0.05s ease-out;
 }
 
+
 @keyframes blink-cursor {
     0%, 100% { opacity: 0.85; }
     50% { opacity: 0; }

src/components/GitSequencer.jsx

@@ -40,6 +40,7 @@ const GitSequencer = () => {
     const inputRef = useRef(null);
     const measureRef = useRef(null);
     const [cursorPos, setCursorPos] = useState(0);
+    const [showCursor, setShowCursor] = useState(true);
 
     // Custom hooks for audio
     const audioEngine = useAudioEngine(username, volume);
@@ -603,22 +604,31 @@ const GitSequencer = () => {
                     <span className="cmd">git-music fetch</span>
                     <div className="input-wrapper">
                         <span ref={measureRef} className="input-measure" aria-hidden="true" />
-                        <span
-                            className="terminal-cursor"
-                            style={{ left: `calc(0.5rem + ${getCursorOffset()}px)` }}
-                        />
+                        {showCursor && (
+                            <span
+                                className="terminal-cursor"
+                                style={{ left: `calc(0.5rem + ${getCursorOffset()}px)` }}
+                            />
+                        )}
                         <input
                             ref={inputRef}
                             type="text"
                             value={username}
                             onChange={(e) => {
                                 setUsername(e.target.value);
+                                setShowCursor(true);
                                 setTimeout(updateCursorPos, 0);
                             }}
                             onKeyUp={updateCursorPos}
                             onMouseUp={updateCursorPos}
                             onSelect={updateCursorPos}
+                            onFocus={() => setShowCursor(true)}
                             onBlur={() => {
+                                // Hide cursor only if there's content
+                                if (username) {
+                                    setShowCursor(false);
+                                }
+                                // Trigger load on blur
                                 if (username && username.length >= 2 && !isLoading) {
                                     if (isPlaying) stop();
                                     loadData(username);

src/hooks/useSequencer.js

@@ -158,7 +158,13 @@ export function useSequencer(audioEngine) {
     // Stop playback
     const stop = useCallback(() => {
         Tone.Transport.stop();
-        if (sequenceRef.current) sequenceRef.current.stop();
+        Tone.Transport.cancel(); // Clear all scheduled events
+        Tone.Transport.position = 0; // Reset position
+        if (sequenceRef.current) {
+            sequenceRef.current.stop();
+            sequenceRef.current.dispose();
+            sequenceRef.current = null;
+        }
         setIsPlaying(false);
         setActiveCol(-1);
         setActiveNotes([]);