lukasbach/react-complex-tree

When text font is increased RCT causes a crash

Closed this issue · 1 comments

Werline commented

Describe the bug
When the RCT text font is modified/increased and a search is initiated then a crash will happen

To Reproduce
Increase text font and begin typing to search in tree... crash.

** JavaScript Code **
<UncontrolledTreeEnvironment
dataProvider={new StaticTreeDataProvider(players, (player, newName) => ({ ...player, data: newName }))}
//getItemTitle={player => player.data}
getItemTitle={(player) => (
<div style={{ fontSize: '20px' }}>{player.data}
)}
viewState={{
'tree-1': {
expandedItems: [parentArray[0] ? parentArray[0].name : null],
activeItems: [parentArray[0] ? parentArray[0].name : null],
},
}}
//canSearch={false}
>

Expected behavior
Increase font and don't crash.

Additional context
Call stack to the error...

ypeError: itemTitle.toLowerCase is not a function
at defaultMatcher (react-complex-tree.js?v=c7ecbd3c:2202:20)
at react-complex-tree.js?v=c7ecbd3c:2729:175
at updateMemo (chunk-VGGCA2L5.js?v=c7ecbd3c:12210:27)
at Object.useMemo (chunk-VGGCA2L5.js?v=c7ecbd3c:12726:24)
at useMemo (chunk-73THXJN7.js?v=c7ecbd3c:1094:29)
at useTreeItemRenderContext (react-complex-tree.js?v=c7ecbd3c:2727:53)
at TreeItemElement (react-complex-tree.js?v=c7ecbd3c:2972:23)
at renderWithHooks (chunk-VGGCA2L5.js?v=c7ecbd3c:11548:26)
at updateFunctionComponent (chunk-VGGCA2L5.js?v=c7ecbd3c:14582:28)
at beginWork (chunk-VGGCA2L5.js?v=c7ecbd3c:15924:22)Understand this error
console.js:288 The above error occurred in the component:

at TreeItemElement (http://localhost:5173/node_modules/.vite/deps/react-complex-tree.js?v=c7ecbd3c:2963:40)
at ul
at TreeItemChildren (http://localhost:5173/node_modules/.vite/deps/react-complex-tree.js?v=c7ecbd3c:2675:12)
at div
at div
at TreeManager (http://localhost:5173/node_modules/.vite/deps/react-complex-tree.js?v=c7ecbd3c:2418:12)
at http://localhost:5173/node_modules/.vite/deps/react-complex-tree.js?v=c7ecbd3c:2517:3
at http://localhost:5173/node_modules/.vite/deps/react-complex-tree.js?v=c7ecbd3c:2612:21
at http://localhost:5173/node_modules/.vite/deps/react-complex-tree.js?v=c7ecbd3c:1186:12
at DragAndDropProvider (http://localhost:5173/node_modules/.vite/deps/react-complex-tree.js?v=c7ecbd3c:789:21)
at InteractionManagerProvider (http://localhost:5173/node_modules/.vite/deps/react-complex-tree.js?v=c7ecbd3c:228:21)
at http://localhost:5173/node_modules/.vite/deps/react-complex-tree.js?v=c7ecbd3c:1709:33
at http://localhost:5173/node_modules/.vite/deps/react-complex-tree.js?v=c7ecbd3c:3284:40
at div
at div
at div
at div
at div
at div
at TitleCard (http://localhost:5173/src/components/Cards/TitleCard.jsx:18:22)
at Dashboard (http://localhost:5173/src/features/dashboard/index.jsx?t=1722606397891:74:50)
at InternalPage (http://localhost:5173/src/pages/protected/Dashboard.jsx:24:20)
at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=c7ecbd3c:4007:5)
at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=c7ecbd3c:4441:5)
at Suspense
at main
at div
at PageContent (http://localhost:5173/src/containers/PageContent.jsx:29:26)
at div
at Layout (http://localhost:5173/src/containers/Layout.jsx:26:34)
at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=c7ecbd3c:4007:5)
at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=c7ecbd3c:4441:5)
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=c7ecbd3c:4384:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=c7ecbd3c:5127:5)
at App (http://localhost:5173/src/App.jsx:40:3)
at Provider (http://localhost:5173/node_modules/.vite/deps/react-redux.js?v=c7ecbd3c:1097:3)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod @ console.js:288
Show 1 more frame
Show lessUnderstand this error
chunk-VGGCA2L5.js?v=c7ecbd3c:9129 Uncaught TypeError: itemTitle.toLowerCase is not a function
at defaultMatcher (react-complex-tree.js?v=c7ecbd3c:2202:20)
at react-complex-tree.js?v=c7ecbd3c:2729:175
at updateMemo (chunk-VGGCA2L5.js?v=c7ecbd3c:12210:27)
at Object.useMemo (chunk-VGGCA2L5.js?v=c7ecbd3c:12726:24)
at useMemo (chunk-73THXJN7.js?v=c7ecbd3c:1094:29)
at useTreeItemRenderContext (react-complex-tree.js?v=c7ecbd3c:2727:53)
at TreeItemElement (react-complex-tree.js?v=c7ecbd3c:2972:23)
at renderWithHooks (chunk-VGGCA2L5.js?v=c7ecbd3c:11548:26)
at updateFunctionComponent (chunk-VGGCA2L5.js?v=c7ecbd3c:14582:28)
at beginWork (chunk-VGGCA2L5.js?v=c7ecbd3c:15924:22)

  • Windows 11 OS
  • Google Chrome
  • Latest version of RCT
lukasbach commented

Hi! The signature of getItemTitle is getItemTitle: (item: TreeItem<T>) => string;, it is invoked when the user searches to find a searchable string for each item. In your case this prop returns a JSX Element, which won't work, it needs to return a string instead. To customize how the title component for a tree item is rendered, use the renderItemTitle prop instead.