Greptile Overview

Greptile Summary

This PR fixes a bug where the rx.clipboard paste event handler failed to bind on first paste when components were rendered dynamically inside rx.dialog (via rx.foreach or rx.match). The fix adds proper dependency tracking and DOM observation for dynamic elements.

Key Changes:

• Added [target_ids] dependency array to the listener-attachment useEffect so it re-runs when target IDs change
• Implemented refs pattern (useRef + separate useEffect) to prevent stale closures in event handlers
• Added MutationObserver to watch for DOM changes and attach listeners once dynamic target elements become available
• Proper cleanup of both observers and event listeners on unmount or when dependencies change

How It Works:
The hook now attempts to attach listeners immediately. If target elements don't exist yet (dynamic rendering), a MutationObserver watches the DOM and attaches listeners once all targets appear. The observer automatically disconnects after successful attachment. Event handlers use refs to always access the latest callbacks, preventing stale closure issues.

Testing:
The fix directly addresses the reproduction case in issue #6032, where paste events in dynamically rendered dialogs required typing before working. With this change, paste handlers bind immediately when elements appear in the DOM.

Confidence Score: 4/5

• This PR is safe to merge with minimal risk
• The implementation is solid, using proper React patterns (refs for stable closures, dependency arrays, cleanup functions). The MutationObserver correctly handles dynamic elements and disconnects after successful attachment. Score is 4 instead of 5 because no automated tests were added for this complex dynamic rendering scenario, making future regression possible
• No files require special attention - the implementation is sound

Important Files Changed

File Analysis

Sequence Diagram

sequenceDiagram
    participant React
    participant usePasteHandler
    participant DOM
    participant MutationObserver
    participant EventListener
    
    Note over React,usePasteHandler: Component renders with clipboard handler
    
    React->>usePasteHandler: Call with target_ids, event_actions, on_paste
    usePasteHandler->>usePasteHandler: Store on_paste & event_actions in refs
    
    alt target_ids dependency changes
        usePasteHandler->>usePasteHandler: Cleanup old listeners & observer
        usePasteHandler->>DOM: Query for target elements by ID
        
        alt All target elements exist
            usePasteHandler->>EventListener: Attach paste listeners to targets
            Note over usePasteHandler: Setup complete
        else Some/all target elements missing (dynamic render)
            usePasteHandler->>MutationObserver: Create observer for DOM changes
            MutationObserver->>DOM: Watch document.body for childList changes
            
            loop Until all targets found
                DOM->>MutationObserver: DOM mutation detected
                MutationObserver->>DOM: Query for target elements
                
                alt Still missing targets
                    Note over MutationObserver: Continue observing
                else All targets now exist
                    MutationObserver->>EventListener: Attach paste listeners
                    MutationObserver->>MutationObserver: Disconnect observer
                end
            end
        end
    end
    
    Note over EventListener: User pastes content
    EventListener->>usePasteHandler: Paste event fired
    usePasteHandler->>usePasteHandler: Use current refs (latest handlers)
    usePasteHandler->>React: Call on_paste with clipboard data

CodSpeed Performance Report

Merging #6037 will not alter performance

_{Comparing debangshu919:fix/rx-clipboard-paste-not-binding (d102bb2) with main (7826d0b)}

Summary

✅ 8 untouched