update: upgrade sheet tabs interactions #564
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR replaces the dialog-based sheet renaming workflow with inline editing and adds right-click menu support, improving the user experience to match common spreadsheet applications.
Key Changes:
- Right-click on sheet tabs now opens the options menu directly
- Double-clicking sheet tabs enables inline name editing
- Removed the separate rename dialog component
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| SheetTabBar.tsx | Added height: 100% to the Sheets container for proper layout |
| SheetTab.tsx | Implemented inline editing with input field, context menu support via right-click, updated styling for active states, and keyboard handling (Enter/Escape) |
| SheetRenameDialog.tsx | Removed dialog component as it's replaced by inline editing |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| useLayoutEffect(() => { | ||
| if (isEditing && measureRef.current) { | ||
| void editingName; |
There was a problem hiding this comment.
This statement void editingName; serves no purpose other than to satisfy the ESLint exhaustive-deps rule. Consider using a comment like // Intentionally depend on editingName or add it to the dependency array explicitly with a comment explaining why it's needed for the side effect, rather than using void.
| void editingName; |
There was a problem hiding this comment.
Not sure how to proceed here 😕
Removing this causes a linter error
| event.stopPropagation(); | ||
| event.preventDefault(); | ||
| handleStartEditing(); | ||
| }} |
There was a problem hiding this comment.
Double-click is not keyboard-accessible. Users navigating with keyboard should be able to enter edit mode. Consider adding keyboard support, such as pressing Enter or F2 when the tab has focus, similar to standard spreadsheet applications.
| }} | |
| }} | |
| onKeyDown={(event: React.KeyboardEvent) => { | |
| if (!isEditing && (event.key === "Enter" || event.key === "F2")) { | |
| event.stopPropagation(); | |
| event.preventDefault(); | |
| handleStartEditing(); | |
| } | |
| }} |
There was a problem hiding this comment.
Please don't just copy/paste this code. But we need to think first how to change the name from the keyboard
There was a problem hiding this comment.
I have already an idea for that but until now we haven't thought much about keyboard support. As an example, hitting 'Tab' only works for the workbook grid, it doesn't really work on the toolbox nor the footer...
This PR introduces two quality-of-life improvements to the sheet tab buttons, making them more intuitive and aligned with typical spreadsheet behavior.
1. Right-click opens the options menu
Users can now open the sheet options menu using right-click, same way as in most spreadsheet applications.
2. Sheet names can be edited inline
Double-clicking a sheet tab now turns it into an inline text input, allowing users to rename the sheet directly.
Previously, renaming required a separate dialog, which interrupted workflow.
Additionally, selecting “Rename sheet” from the menu now automatically focuses the input.
Testing
Entersaves the new sheet name; pressingEscapecancels it.