Skip to content

Improve keyboard interaction and focus management for editable name components in session detail drawer and folder explorer modal #4420

@yomybaby

Description

@yomybaby

This task involves enhancing the keyboard interaction and focus management for editable name components in the session detail drawer and folder explorer modal to provide better user experience.

Background:
Currently, when users are editing names in the session detail drawer or folder explorer modal, there are issues with keyboard shortcuts and focus management:

  1. The ESC key should close modals, but when editing name fields, it can interfere with the editing process
  2. After editing is completed, focus should be properly managed to allow normal keyboard navigation
  3. Modal close behavior should be keyboard-accessible but should not interfere with name editing

Acceptance Criteria:

  • Enable keyboard (ESC key) closing for session detail drawer and folder explorer modal
  • When name editing components are focused, prevent modal from closing unexpectedly
  • After editing is complete, focus should be properly set to allow normal ESC key modal closing
  • Implement proper focus management and event handling for better UX
  • Ensure all editable name components (EditableFileName, EditableSessionName, EditableVFolderName) have consistent behavior

Technical Notes:

  • Affects EditableFileName, EditableSessionName, EditableVFolderName components
  • Involves adding focus management with useRef and focus fallback functions
  • Requires event.stopPropagation() handling for ESC key during editing
  • Updates modal keyboard property and tabIndex management

JIRA Issue: FR-1572

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions