diff --git a/.changeset/curvy-carrots-feel.md b/.changeset/curvy-carrots-feel.md new file mode 100644 index 0000000000..08a2dd53ed --- /dev/null +++ b/.changeset/curvy-carrots-feel.md @@ -0,0 +1,5 @@ +--- +"@lynx-js/web-elements": patch +--- + +fix: the param `index` of list scrollToPosition function should be `position`. diff --git a/packages/web-platform/web-elements/src/XList/XList.ts b/packages/web-platform/web-elements/src/XList/XList.ts index 6d80e0019a..f1bc2f3b1c 100644 --- a/packages/web-platform/web-elements/src/XList/XList.ts +++ b/packages/web-platform/web-elements/src/XList/XList.ts @@ -56,7 +56,7 @@ export class XList extends HTMLElement { scrollToPosition( params: { - index: number; + position: number; smooth?: boolean; /** * @description The offset of the content @@ -73,12 +73,14 @@ export class XList extends HTMLElement { offset = { left: params.offset, top: params.offset }; } - if (typeof params.index === 'number') { - if (params.index === 0) { + if (typeof params.position === 'number') { + if (params.position === 0) { this.#getListContainer().scrollTop = 0; this.#getListContainer().scrollLeft = 0; - } else if (params.index > 0 && params.index < this.childElementCount) { - const targetKid = this.children.item(params.index); + } else if ( + params.position > 0 && params.position < this.childElementCount + ) { + const targetKid = this.children.item(params.position); if (targetKid instanceof HTMLElement) { if (offset) { offset = { diff --git a/packages/web-platform/web-elements/src/XList/XListAttributes.ts b/packages/web-platform/web-elements/src/XList/XListAttributes.ts index 8d91ce96f5..c3c29cbc75 100644 --- a/packages/web-platform/web-elements/src/XList/XListAttributes.ts +++ b/packages/web-platform/web-elements/src/XList/XListAttributes.ts @@ -46,14 +46,14 @@ export class XListAttributes const initialScrollIndex = this.#dom.getAttribute('initial-scroll-index'); if (initialScrollIndex !== null) { - const index = parseFloat(initialScrollIndex); + const position = parseFloat(initialScrollIndex); const scrollToInitialIndex = () => { if (this.#dom.clientHeight === 0) { // In Safari, there is the potential race condition between the browser's layout and clientWidth calculate. // So, we have to use requestAnimationFrame to ensure that the code runs after the browser's layout. requestAnimationFrame(scrollToInitialIndex); } else { - this.#dom.scrollToPosition({ index }); + this.#dom.scrollToPosition({ position }); } }; diff --git a/packages/web-platform/web-tests/tests/react/basic-element-list-scroll-to-position/index.jsx b/packages/web-platform/web-tests/tests/react/basic-element-list-scroll-to-position/index.jsx index a9ca38c42c..2cb8f9591a 100644 --- a/packages/web-platform/web-tests/tests/react/basic-element-list-scroll-to-position/index.jsx +++ b/packages/web-platform/web-tests/tests/react/basic-element-list-scroll-to-position/index.jsx @@ -9,7 +9,7 @@ function App() { const handleScrollToPosition = () => { ref.current?.invoke({ method: 'scrollToPosition', - params: { index: 10 }, + params: { position: 10 }, }).exec(); }; diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-to-position.html b/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-to-position.html index 07e3a576e1..d9bb0317f6 100644 --- a/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-to-position.html +++ b/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-to-position.html @@ -29,7 +29,7 @@ 'click', () => { document.querySelector('x-list').scrollToPosition({ - index: 10, + position: 10, }); }, );