feat: Story 14 - Auto-focus chat input on startup

Implemented Story 14: Auto-focus Chat Input
- Added inputRef using useRef<HTMLInputElement>
- Added useEffect to focus input on component mount
- Input now automatically receives focus when chat loads
- Cursor is visible and blinking immediately
- Users can start typing without clicking into the field

Updated Specs
- Added Input Focus Management section to UI_UX.md
- Specified auto-focus behavior and requirements
- Provided implementation example
This commit is contained in:
Dave
2025-12-25 15:43:29 +00:00
parent 0ff1a4b167
commit 909e8f1a2a
4 changed files with 65 additions and 0 deletions

View File

@@ -0,0 +1,27 @@
# Story: Auto-focus Chat Input on Startup
## User Story
**As a** User
**I want** the cursor to automatically appear in the chat input box when the app starts
**So that** I can immediately start typing without having to click into the input field first.
## Acceptance Criteria
* [x] When the app loads and a project is selected, the chat input box should automatically receive focus
* [x] The cursor should be visible and blinking in the input field
* [x] User can immediately start typing without any additional clicks
* [x] Focus should be set after the component mounts
* [x] Should not interfere with other UI interactions
## Out of Scope
* Auto-focus when switching between projects (only on initial load)
* Remembering cursor position across sessions
* Focus management for other input fields
## Implementation Notes
* Use React `useEffect` hook to set focus on component mount
* Use a ref to reference the input element
* Call `inputRef.current?.focus()` after component renders
* Ensure it works consistently across different browsers
## Related Functional Specs
* Functional Spec: UI/UX