feat(FR-1572): improve keyboard interaction and focus management for editable name components

[yomybaby]

Resolves #4420 (FR-1572)

Summary

This PR improves keyboard interaction and focus management for editable name components in the session detail drawer and folder explorer modal.

Changes

• Added focus management using useRef and focus fallback functions to EditableFileName, EditableSessionName, and EditableVFolderName components
• Implemented event.stopPropagation() for ESC key during editing to prevent modal closing
• Added proper tabIndex and focus handling after editing completes
• Enabled keyboard modal closing (keyboard prop) for FolderExplorer modal
• Added 'use memo' directive for React compiler optimization

Technical Details

• When editing name fields, ESC key now cancels editing without closing the parent modal/drawer
• After editing completes (either by confirmation or cancellation), focus returns to the text element with proper tabIndex
• This ensures ESC key can properly close modals when not in editing mode
• All editable name components now have consistent keyboard interaction behavior

Testing

• Test editing names in session detail drawer - ESC should cancel editing without closing drawer
• Test editing names in folder explorer modal - ESC should cancel editing without closing modal
• After editing, ESC should properly close the modal/drawer
• Verify focus management works correctly when switching between editing and view modes

[yomybaby]

• feat(FR-1572): improve keyboard interaction and focus management for editable name components #4421 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• flow:merge-queue - adds this PR to the back of the merge queue
• flow:hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

Coverage report for ./packages/backend.ai-ui

St.❔	Category	Percentage	Covered / Total
🔴	Statements	51.38%	130/253
🔴	Branches	30.3%	80/264
🔴	Functions	34.48%	20/58
🔴	Lines	53.85%	119/221

Test suite run success

55 tests passing in 3 suites.

Report generated by 🧪jest coverage report action from a07c6df

[github-actions]

Coverage report for ./react

St.❔	Category	Percentage	Covered / Total
🔴	Statements	4.69% (-0.01% 🔻)	532/11346
🔴	Branches	3.79%	302/7972
🔴	Functions	2.9% (-0% 🔻)	102/3523
🔴	Lines	4.64% (-0.01% 🔻)	514/11089

Test suite run success

121 tests passing in 14 suites.

Report generated by 🧪jest coverage report action from a07c6df

[Copilot]

Pull Request Overview

This PR improves keyboard interaction and focus management for editable name components to prevent modals from closing when ESC is pressed during name editing.

• Adds focus management with useRef to return focus after editing completes
• Implements ESC key event propagation stopping during editing to prevent unintended modal closure
• Enables keyboard-based modal closing for FolderExplorer when not in editing mode

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
react/src/components/FolderExplorer.tsx	Enables keyboard prop to allow ESC key to close modal when not editing
react/src/components/EditableVFolderName.tsx	Adds focus management, ESC propagation stopping, and React compiler directive
react/src/components/ComputeSessionNodeItems/EditableSessionName.tsx	Adds focus management, ESC propagation stopping, and React compiler directive
packages/backend.ai-ui/src/components/baiClient/FileExplorer/EditableFileName.tsx	Adds focus management, ESC propagation stopping, and React compiler directive

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[agatha197]

It's good as it is now, but couldn’t we create a hook to reduce duplicate code?

import { useRef, useCallback } from 'react';

export function useEditableFocusManagement<T extends HTMLElement = HTMLElement>() {
  const textRef = useRef<T>(null);

  const focusFallback = useCallback(() => {
    setTimeout(() => {
      textRef.current?.focus();
    }, 0);
  }, []);

  const createEscapeHandler = useCallback((
    onEscape: () => void
  ) => {
    return (e: React.KeyboardEvent) => {
      if (e.key === 'Escape') {
        e.stopPropagation();
        onEscape();
      }
    };
  }, []);

  return {
    textRef,
    focusFallback,
    createEscapeHandler,
    textProps: {
      ref: textRef,
      tabIndex: -1 as const,
      style: { outline: 'none' } as const,
    },
  };
}

const { focusFallback, createEscapeHandler, textProps } = 
  useEditableFocusManagement<HTMLSpanElement>();

<Component {...textProps} />

<Input 
  onKeyDown={createEscapeHandler(() => {
    setIsEditing(false);
    focusFallback();
  })} 
/>

[ironAiken2]

I left some comments. Also, please resolve the conflicts :)

[ironAiken2]

Should focusFallback also be included in onFinish? When editing becomes false, the form focus is automatically released.

[ironAiken2]

Should we modify the tabIndex?