diff --git a/packages/@react-spectrum/table/stories/Table.stories.tsx b/packages/@react-spectrum/table/stories/Table.stories.tsx index 96020a918ae..3c98f38b863 100644 --- a/packages/@react-spectrum/table/stories/Table.stories.tsx +++ b/packages/@react-spectrum/table/stories/Table.stories.tsx @@ -1485,14 +1485,13 @@ export const AsyncLoadingClientFiltering: TableStory = { name: 'async client side filter loading' }; +interface StarWarsItem { + name: string, + height: string, + mass: string +} function AsyncServerFilterTable(props) { - interface Item { - name: string, - height: string, - mass: string - } - let columns = [ { name: 'Name', @@ -1509,7 +1508,7 @@ function AsyncServerFilterTable(props) { } ]; - let list = useAsyncList({ + let list = useAsyncList({ getKey: (item) => item.name, async load({signal, cursor, filterText}) { if (cursor) { @@ -2197,4 +2196,67 @@ function LoadingTable() { ); } +function AsyncLoadOverflowWrapRepro() { + let columns = [ + {name: 'Name', key: 'name'}, + {name: 'Height', key: 'height'}, + {name: 'Mass', key: 'mass'}, + {name: 'Birth Year', key: 'birth_year'} + ]; + + let list = useAsyncList({ + async load({signal, cursor}) { + if (cursor) { + cursor = cursor.replace(/^http:\/\//i, 'https://'); + } + + let res = await fetch( + cursor || 'https://swapi.py4e.com/api/people/?search=', + {signal} + ); + let json = await res.json(); + + return { + items: json.results, + cursor: json.next + }; + } + }); + + return ( + + + {(column) => ( + + {column.name} + + )} + + + {(item) => ( + + {(key) => ( + {`${item[key]}++++${item[key]}++++${item[key]}++++`} + )} + + )} + + + ); +} + +export const AsyncLoadOverflowWrapReproStory: TableStory = { + render: (args) => , + name: 'async, overflow wrap scroll jumping reproduction', + parameters: {description: {data: ` + Rapidly scrolling down through this table should not cause the scroll position to jump to the top. + `}} +}; + export {Performance} from './Performance'; diff --git a/packages/@react-stately/layout/src/TableLayout.ts b/packages/@react-stately/layout/src/TableLayout.ts index a04d111ad0f..de681cc9452 100644 --- a/packages/@react-stately/layout/src/TableLayout.ts +++ b/packages/@react-stately/layout/src/TableLayout.ts @@ -68,9 +68,12 @@ export class TableLayout exten // If columnWidths were provided via layoutOptions, update those. // Otherwise, calculate column widths ourselves. if (invalidationContext.layoutOptions?.columnWidths) { - if (invalidationContext.layoutOptions.columnWidths !== this.columnWidths) { - this.columnWidths = invalidationContext.layoutOptions.columnWidths; - invalidationContext.sizeChanged = true; + for (const [key, val] of invalidationContext.layoutOptions.columnWidths) { + if (this.columnWidths.get(key) !== val) { + this.columnWidths = invalidationContext.layoutOptions.columnWidths; + invalidationContext.sizeChanged = true; + break; + } } } else if (invalidationContext.sizeChanged || this.columnsChanged(newCollection, this.lastCollection)) { let columnLayout = new TableColumnLayout({});