fix(datagrid): pagination input should only change page on enter

BREAKING CHANGE:
- The pagination input will only change the current page on enter keypress.
- The pagination input will resets the input value to the actual current page on blur.

Signed-off-by: Ivan Donchev <idonchev@vmware.com>

projects/angular/clarity.api.md

@@ -1652,6 +1652,8 @@ export class ClrDatagridPagination implements OnDestroy, OnInit {
     set totalItems(total: number | string);
     updateCurrentPage(event: any): void;
     // (undocumented)
+    verifyCurrentPage(event: any): void;
+    // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrDatagridPagination, "clr-dg-pagination", never, { "disableCurrentPageInput": "clrDgPageInputDisabled"; "pageSize": "clrDgPageSize"; "totalItems": "clrDgTotalItems"; "lastPage": "clrDgLastPage"; "currentPage": "clrDgPage"; }, { "currentChanged": "clrDgPageChange"; }, ["_pageSizeComponent"], ["clr-dg-page-size", "*"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrDatagridPagination, never>;

projects/angular/src/data/datagrid/datagrid-pagination.spec.ts

@@ -256,7 +256,7 @@ export default function (): void {
         expect(context.testComponent.current.toString()).toBe('4');
       });
 
-      it('changes the current page on blur', function () {
+      it('does not change the current page on blur', function () {
         context.testComponent.size = 10;
         context.testComponent.total = 100;
         context.testComponent.current = 1;
@@ -269,7 +269,23 @@ export default function (): void {
         current.dispatchEvent(new Event('blur'));
         // Note: the toString() wouldn't be necessary if we used input type='number',
         // but we decided to opt for type='text' for now due to limited cross-browser support
-        expect(context.testComponent.current.toString()).toBe('4');
+        expect(context.testComponent.current.toString()).toBe('1');
+      });
+
+      it('input value resets on blur', function () {
+        context.testComponent.size = 10;
+        context.testComponent.total = 100;
+        context.testComponent.current = 1;
+        context.detectChanges();
+
+        const current = context.clarityElement.querySelector('.pagination-current');
+        expect(current).not.toBeNull();
+        current.value = 4;
+        current.dispatchEvent(new Event('input'));
+        current.dispatchEvent(new Event('blur'));
+        // Note: the toString() wouldn't be necessary if we used input type='number',
+        // but we decided to opt for type='text' for now due to limited cross-browser support
+        expect(current.value.toString()).toBe('1');
       });
 
       it('ignores the current page when input value is invalid', function () {
@@ -298,7 +314,12 @@ export default function (): void {
         expect(current).not.toBeNull();
         current.value = 0;
         current.dispatchEvent(new Event('input'));
-        current.dispatchEvent(new Event('blur'));
+        current.dispatchEvent(
+          new KeyboardEvent('keydown', {
+            code: 'Enter',
+            key: 'Enter',
+          })
+        );
         // Note: the toString() wouldn't be necessary if we used input type='number',
         // but we decided to opt for type='text' for now due to limited cross-browser support
         expect(context.testComponent.current.toString()).toBe('1');
@@ -314,7 +335,12 @@ export default function (): void {
         expect(current).not.toBeNull();
         current.value = 20;
         current.dispatchEvent(new Event('input'));
-        current.dispatchEvent(new Event('blur'));
+        current.dispatchEvent(
+          new KeyboardEvent('keydown', {
+            code: 'Enter',
+            key: 'Enter',
+          })
+        );
         // Note: the toString() wouldn't be necessary if we used input type='number',
         // but we decided to opt for type='text' for now due to limited cross-browser support
         expect(context.testComponent.current.toString()).toBe('10');

projects/angular/src/data/datagrid/datagrid-pagination.ts

@@ -61,7 +61,7 @@ import { Page } from './providers/page';
           [size]="page.last.toString().length"
           [value]="page.current"
           (keydown.enter)="updateCurrentPage($event)"
-          (blur)="updateCurrentPage($event)"
+          (blur)="verifyCurrentPage($event)"
           [attr.aria-label]="commonStrings.keys.currentPage"
         />
         <ng-template #readOnly>
@@ -261,9 +261,15 @@ export class ClrDatagridPagination implements OnDestroy, OnInit {
     return middlePages;
   }
 
+  verifyCurrentPage(event: any): void {
+    const parsed = parseInt(event.target.value, 10);
+    if (parsed !== this.page.current) {
+      event.target.value = this.page.current;
+    }
+  }
+
   /**
-   * We only update the pagination's current page on blur of the input field, or
-   * when they press enter.
+   * We only update the pagination's current page on enter.
    */
   updateCurrentPage(event: any): void {
     const parsed = parseInt(event.target.value, 10);