From b22c68be5476f3a6785b784b244a516c1acd9add Mon Sep 17 00:00:00 2001 From: Hana Date: Tue, 19 Sep 2023 19:02:01 +0900 Subject: [PATCH] [fix] id properties of undefined (#1730) (#1919) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR fixes id properties of undefined. ```js PageMenu.mjs:89 Uncaught TypeError: Cannot read properties of undefined (reading 'id') at PageMenu2 (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@tldraw+tldraw@2.0.0-canary.c52ba35ee89f_@types+react-dom@18.2.7_@types+react@18.2.21_react-dom@18.2.0_react@18.2.0/node_modules/@tldraw/tldraw/dist-esm/lib/ui/components/PageMenu/PageMenu.mjs:99:32) at renderWithHooks (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@opentelemetry+api@1.4.1_react-dom@18.2.0_react@18.2.0_sass@1.66.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10697:18) at updateFunctionComponent (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@opentelemetry+api@1.4.1_react-dom@18.2.0_react@18.2.0_sass@1.66.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:15180:20) ``` ![스크린샷 2023-09-19 오후 6 06 26](https://github.com/tldraw/tldraw/assets/59823089/8161c599-3554-4671-86fb-cf303bf60311) ### Change Type - [x] `patch` — Bug fix [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan - [x] Use google chrome force reload ![hard-refresh-browser-chrome](https://github.com/tldraw/tldraw/assets/59823089/0d0cf030-92b3-48db-bbef-252fc813ea03) - [x] 2\~3 Tldraw pages, 2\~3 peers 1. [tldraw-yjs-example](https://github.com/tldraw/tldraw-yjs-example) quickly reload 2. Apply it to [tldraw-yjs-example](https://github.com/tldraw/tldraw-yjs-example) and then quickly reload 3. Compare the two versions ### Release Notes - Fixed a bug similar #1730 --- packages/tldraw/src/lib/ui/components/PageMenu/PageMenu.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/tldraw/src/lib/ui/components/PageMenu/PageMenu.tsx b/packages/tldraw/src/lib/ui/components/PageMenu/PageMenu.tsx index 2a896cf1c..46062ccde 100644 --- a/packages/tldraw/src/lib/ui/components/PageMenu/PageMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/PageMenu/PageMenu.tsx @@ -34,6 +34,7 @@ export const PageMenu = function PageMenu() { const pages = useValue('pages', () => editor.pages, [editor]) const currentPage = useValue('currentPage', () => editor.currentPage, [editor]) + const currentPageId = useValue('currentPageId', () => editor.currentPageId, [editor]) // When in readonly mode, we don't allow a user to edit the pages const isReadonlyMode = useReadonly() @@ -86,7 +87,7 @@ export const PageMenu = function PageMenu() { if (!isOpen) return requestAnimationFrame(() => { const elm = document.querySelector( - `[data-testid="page-menu-item-${currentPage.id}"]` + `[data-testid="page-menu-item-${currentPageId}"]` ) as HTMLDivElement if (elm) { @@ -108,7 +109,7 @@ export const PageMenu = function PageMenu() { } } }) - }, [ITEM_HEIGHT, currentPage.id, isOpen]) + }, [ITEM_HEIGHT, currentPageId, isOpen]) const handlePointerDown = useCallback( (e: React.PointerEvent) => {