PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

[fix] id properties of undefined (#1730) (#1919)

Browse source 
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
This commit is contained in:
Hana 2023-09-19 19:02:01 +09:00 committed by GitHub
parent cc3bd1d114
commit b22c68be54
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/tldraw/src/lib/ui/components/PageMenu/PageMenu.tsx
View file

@ -34,6 +34,7 @@ export const PageMenu = function PageMenu() {
const pages = useValue('pages', () => editor.pages, [editor]) const pages = useValue('pages', () => editor.pages, [editor])
const currentPage = useValue('currentPage', () => editor.currentPage, [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 // When in readonly mode, we don't allow a user to edit the pages
const isReadonlyMode = useReadonly() const isReadonlyMode = useReadonly()
@ -86,7 +87,7 @@ export const PageMenu = function PageMenu() {
if (!isOpen) return if (!isOpen) return
requestAnimationFrame(() => { requestAnimationFrame(() => {
const elm = document.querySelector( const elm = document.querySelector(
`[data-testid="page-menu-item-${currentPage.id}"]` `[data-testid="page-menu-item-${currentPageId}"]`
) as HTMLDivElement ) as HTMLDivElement
if (elm) { if (elm) {
@ -108,7 +109,7 @@ export const PageMenu = function PageMenu() {
} }
} }
}) })
}, [ITEM_HEIGHT, currentPage.id, isOpen]) }, [ITEM_HEIGHT, currentPageId, isOpen])
const handlePointerDown = useCallback( const handlePointerDown = useCallback(
(e: React.PointerEvent<HTMLButtonElement>) => { (e: React.PointerEvent<HTMLButtonElement>) => {