Fix cursor jumping to beginning in ContentEditable inputs

[Copilot]

Fix cursor jumping to beginning of input in ContentEditable component

Problem

When typing in a line or comment, the cursor would jump to the beginning of the input after each keystroke, making it impossible to type normally.

Root Cause

1. Every keystroke triggers onChange which updates Firebase
2. Firebase updates propagate back to the component as new props
3. shouldComponentUpdate returns true, causing React to re-render
4. Re-rendering recreates the DOM element, resetting cursor to position 0

Solution

Modified the ContentEditable component with two complementary fixes:

Primary Fix: Prevent Re-renders During Typing

Updated shouldComponentUpdate to return false when the element is currently focused (user is actively typing). This prevents unnecessary re-renders and naturally preserves cursor position.

shouldComponentUpdate: function(nextProps) {
    var element = this.getDOMNode();
    if (document.activeElement === element) {
        return false;  // Skip re-render while typing
    }
    return nextProps.html !== element.innerHTML;
}

Backup Fix: Cursor Position Restore

Extracted cursor positioning logic into a reusable placeCaretAtPosition helper function that saves and restores cursor position for edge cases where updates occur when the element doesn't have focus.

Implementation Status

• Identify the root cause in ContentEditable component
• Fix shouldComponentUpdate to prevent re-renders when element is focused
• Refactor cursor positioning into DRY helper function
• Build and clean JSX to JavaScript compilation
• Run security scan (0 alerts found)
• Document the fix and testing approach

Files Changed

• script.jsx - Modified ContentEditable component and added placeCaretAtPosition helper
• script.js - Compiled JavaScript from JSX

Security

✅ CodeQL analysis passed with 0 alerts - no security vulnerabilities introduced.

Code Quality

Refactored to follow DRY principles by extracting cursor positioning logic into a reusable helper function, reducing code duplication and improving maintainability.

Original prompt

writing into the comment or line causes the cursor to move to the left edge of the input. I think every on change is causing the element to re-render which is moving the cursor. fix it so that the cursor does not keep sliding to the beginning of the input whenever I start typing on a row or comment

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[ProLoser]

@copilot make this more dry

[Copilot]

@copilot make this more dry

Refactored the cursor positioning logic into a reusable placeCaretAtPosition helper function. This reduced the componentDidUpdate method from ~40 lines to 4 lines and eliminated code duplication. (3b8edf7)

[ProLoser]

@copilot are both files being used?

[Copilot]

@copilot are both files being used?

Yes, both files are being used:

• script.jsx is the source file (JSX/React code you edit)
• script.js is the compiled output (what the browser loads via index.html line 18)

The gulpfile.js has a react task that compiles .jsx → .js. Both files are currently tracked in git, though typically build outputs like script.js would be gitignored and generated during deployment. If you'd prefer, I can add script.js to .gitignore so only the source script.jsx is committed.