diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index a201a440b..6e09b4a07 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -1341,8 +1341,18 @@ class App extends React.Component { _cache: new Map(), }; + private resetEditingFrame = (frame: ExcalidrawFrameLikeElement | null) => { + if (frame) { + mutateElement(frame, { name: frame.name?.trim() || null }); + } + this.setState({ editingFrame: null }); + }; + private renderFrameNames = () => { if (!this.state.frameRendering.enabled || !this.state.frameRendering.name) { + if (this.state.editingFrame) { + this.resetEditingFrame(null); + } return null; } @@ -1364,6 +1374,9 @@ class App extends React.Component { this.scene.getNonDeletedElementsMap(), ) ) { + if (this.state.editingFrame === f.id) { + this.resetEditingFrame(f); + } // if frame not visible, don't render its name return null; } @@ -1375,11 +1388,6 @@ class App extends React.Component { const FRAME_NAME_EDIT_PADDING = 6; - const reset = () => { - mutateElement(f, { name: f.name?.trim() || null }); - this.setState({ editingFrame: null }); - }; - let frameNameJSX; const frameName = getFrameLikeTitle(f); @@ -1397,13 +1405,13 @@ class App extends React.Component { }); }} onFocus={(e) => e.target.select()} - onBlur={() => reset()} + onBlur={() => this.resetEditingFrame(f)} onKeyDown={(event) => { // for some inexplicable reason, `onBlur` triggered on ESC // does not reset `state.editingFrame` despite being called, // and we need to reset it here as well if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) { - reset(); + this.resetEditingFrame(f); } }} style={{ diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts index 42d8aca8d..7f6bab535 100644 --- a/packages/excalidraw/data/restore.ts +++ b/packages/excalidraw/data/restore.ts @@ -639,6 +639,7 @@ export const restoreAppState = ( gridStep: getNormalizedGridStep( isFiniteNumber(appState.gridStep) ? appState.gridStep : DEFAULT_GRID_STEP, ), + editingFrame: null, }; };