diff --git a/src/components/Pagination/Pagination.svelte b/src/components/Pagination/Pagination.svelte index 83724018..103a5517 100644 --- a/src/components/Pagination/Pagination.svelte +++ b/src/components/Pagination/Pagination.svelte @@ -22,6 +22,19 @@ import CaretRight24 from 'carbon-icons-svelte/lib/CaretRight24'; import { cx, fillArray } from '../../lib'; import Select, { SelectItem } from '../Select'; + import { createEventDispatcher } from 'svelte'; + + const dispatch = createEventDispatcher(); + const handlePaginationChange = (type, value) => { + if (type === 'pageSize') { + page = 1; + pageSize = value; + } else { + page = value; + } + + dispatch('update', {pageSize, page}); + }; $: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1); $: selectItems = fillArray(totalPages); @@ -43,9 +56,9 @@ labelText="" hideLabel noLabel - inline - on:change={() => { - page = 1; + inline + on:blur={() => { + handlePaginationChange('pageSize', pageSize); }} bind:selected={pageSize}> {#each pageSizes as size, i (size)} @@ -68,6 +81,9 @@ labelText={`Page number, of ${totalPages} pages`} inline hideLabel + on:blur={() => { + handlePaginationChange('page', page); + }} bind:selected={page}> {#each selectItems as size, i (size)} @@ -82,6 +98,7 @@ class={cx('--pagination__button', '--pagination__button--backward', backButtonDisabled && '--pagination__button--no-index')} on:click={() => { page--; + handlePaginationChange('page', page); }} aria-label={backwardText} disabled={backButtonDisabled}> @@ -93,6 +110,7 @@ aria-label={forwardText} on:click={() => { page++; + handlePaginationChange('page', page); }} disabled={forwardButtonDisabled}>