fix(frontend): Newly typed text in Input fields vanishes on scroll

[majdyz]

This fixes #8625

Due to the input values are globally managed and asynchronous, the onBlur event was used instead of onChange to avoid the jumping caret problem.

However, this causes issues when there could be some re-render events that still keep the input box focused, making the onBlur not triggered, but the input was reset. One such scenario is the scrolling (zoom-in & zoom-out of the node editor).

Changes 🏗️

Introduce & use LocalValuedInput. Instead of using onBlur as a trigger, the component maintains its local state value to be displayed on the input box, but also calls the onChange update on the globally managed value state, while syncing its value from the outside.

Checklist 📋

For code changes:

• I have clearly listed my changes in the PR description
• I have made a test plan
• I have tested my changes according to the test plan:
  • ...

Example test plan

• Create from scratch and execute an agent with at least 3 blocks
• Import an agent from file upload, and confirm it executes correctly
• Upload agent to marketplace
• Import an agent from marketplace and confirm it executes correctly
• Edit an agent from monitor, and confirm it executes correctly

For configuration changes:

• .env.example is updated or already compatible with my changes
• docker-compose.yml is updated or already compatible with my changes
• I have included a list of my configuration changes in the PR description (under Changes)

Examples of configuration changes

• Changing ports
• Adding new services that need to communicate with each other
• Secrets or environment variable changes
• New or infrastructure changes such as databases

[qodo-merge-pro]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 8625 - Fully compliant Compliant requirements: Fix bug where newly typed text in input fields vanishes when scrolling

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review State Management The useEffect hook in LocalValuedInput component doesn't have inputValue in its dependency array. While commented as intentional, this pattern could potentially lead to stale state issues. Verify the component behaves correctly in all edge cases. Type Safety The value prop passed to LocalValuedInput in NodeNumberInput component might need type checking or conversion before being set as the input value to ensure type consistency

[netlify]

✅ Deploy Preview for auto-gpt-docs canceled.

Name	Link
🔨 Latest commit	bddc5a7
🔍 Latest deploy log	https://app.netlify.com/sites/auto-gpt-docs/deploys/6736fd3e3e98c500083bdc26