valknar/audio-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ensure track name is always converted to string in TrackHeader

Browse Source 
Convert track.name to string in all state initializations and updates
to prevent '[object Object]' rendering issues.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2025-11-17 22:39:43 +01:00
parent 6b540ef8fb
commit 53d436a174
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/tracks/TrackHeader.tsx
View File

@@ -29,12 +29,12 @@ export function TrackHeader({
onNameChange, onNameChange,
}: TrackHeaderProps) { }: TrackHeaderProps) {
const [isEditingName, setIsEditingName] = React.useState(false); const [isEditingName, setIsEditingName] = React.useState(false);
const [nameInput, setNameInput] = React.useState(track.name); const [nameInput, setNameInput] = React.useState(String(track.name || 'Untitled Track'));
const inputRef = React.useRef<HTMLInputElement>(null); const inputRef = React.useRef<HTMLInputElement>(null);
const handleNameClick = () => { const handleNameClick = () => {
setIsEditingName(true); setIsEditingName(true);
setNameInput(track.name); setNameInput(String(track.name || 'Untitled Track'));
}; };
const handleNameBlur = () => { const handleNameBlur = () => {
@@ -42,7 +42,7 @@ export function TrackHeader({
if (nameInput.trim()) { if (nameInput.trim()) {
onNameChange(nameInput.trim()); onNameChange(nameInput.trim());
} else { } else {
setNameInput(track.name); setNameInput(String(track.name || 'Untitled Track'));
} }
}; };
@@ -50,7 +50,7 @@ export function TrackHeader({
if (e.key === 'Enter') { if (e.key === 'Enter') {
inputRef.current?.blur(); inputRef.current?.blur();
} else if (e.key === 'Escape') { } else if (e.key === 'Escape') {
setNameInput(track.name); setNameInput(String(track.name || 'Untitled Track'));
setIsEditingName(false); setIsEditingName(false);
} }
}; };