fix: don't render item prop for html elements (#992)

petyosi · Oct 10, 2023 · 4a57a42 · 4a57a42
1 parent 64b223c
commit 4a57a42
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/TableVirtuoso.tsx b/src/TableVirtuoso.tsx
@@ -4,7 +4,14 @@ import React from 'react'
 import useChangedListContentsSizes from './hooks/useChangedChildSizes'
 import { ComputeItemKey, ItemContent, FixedHeaderContent, FixedFooterContent, TableComponents, TableRootProps } from './interfaces'
 import { listSystem } from './listSystem'
-import { identity, buildScroller, buildWindowScroller, viewportStyle, contextPropIfNotDomElement } from './Virtuoso'
+import {
+  identity,
+  buildScroller,
+  buildWindowScroller,
+  viewportStyle,
+  contextPropIfNotDomElement,
+  itemPropIfNotDomElement,
+} from './Virtuoso'
 import useSize from './hooks/useSize'
 import { correctItemSize } from './utils/correctItemSize'
 import useWindowViewportRectRef from './hooks/useWindowViewportRect'
@@ -143,11 +150,11 @@ const Items = /*#__PURE__*/ React.memo(function VirtuosoItems() {
       TableRowComponent,
       {
         ...contextPropIfNotDomElement(TableRowComponent, context),
+        ...itemPropIfNotDomElement(TableRowComponent, item.data),
         key,
         'data-index': index,
         'data-known-size': item.size,
         'data-item-index': item.index,
-        item: item.data,
         style: ITEM_STYLE,
       },
       itemContent(item.index, item.data, context)

diff --git a/src/Virtuoso.tsx b/src/Virtuoso.tsx
@@ -169,12 +169,12 @@ const Items = /*#__PURE__*/ React.memo(function VirtuosoItems({ showTopList = fa
           ItemComponent,
           {
             ...contextPropIfNotDomElement(ItemComponent, context),
+            ...itemPropIfNotDomElement(ItemComponent, item.data),
             key,
             'data-index': index,
             'data-known-size': item.size,
             'data-item-index': item.index,
             'data-item-group-index': item.groupIndex,
-            item: item.data,
             style: ITEM_STYLE,
           },
           hasGroups
@@ -215,6 +215,10 @@ export function contextPropIfNotDomElement(element: unknown, context: unknown) {
   return { context }
 }
 
+export function itemPropIfNotDomElement(element: unknown, item: unknown) {
+  return { item: typeof element === 'string' ? undefined : item }
+}
+
 const Header: React.FC = /*#__PURE__*/ React.memo(function VirtuosoHeader() {
   const Header = useEmitterValue('HeaderComponent')
   const headerHeight = usePublisher('headerHeight')