Paginator: template JumpToPageInput onChange not working

[ibodev1]

Describe the bug

My paginator template feature JumpToPageInput cannot changing page.

const paginatorTemplate: PaginatorTemplateOptions = {
  layout: 'PrevPageLink PageLinks NextPageLink JumpToPageInput',
  JumpToPageInput: (opts: PaginatorJumpToPageInputOptions) => {
    const [currentPage, setCurrentPage] = useState<number>(opts.value);

    const rows = opts.props.rows;

    if (typeof rows !== 'number') return undefined;

    const handleChange = (e: InputNumberChangeEvent) => {
      setCurrentPage(Number(e.value));
    };

    const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
      if (e.key === 'Enter') {
        opts.onChange(rows * (currentPage - 1), rows);
      }
    };

    return <InputNumber value={currentPage} min={1} onChange={handleChange} onKeyDown={onKeyDown} />;
  },
};

rendering but not change page when i am pressed "Enter". keydown event working true.

System Information

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 AMD Ryzen 5 5625U with Radeon Graphics
    Memory: 4.11 GB / 15.31 GB
  Binaries:
    Node: 20.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.6.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (129.0.2792.65)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    primereact: ^10.8.3 => 10.8.3
    react: ^18.3.1 => 18.3.1

[ibodev1]

I felt the need to make such a custom component because I do a reflect operation when the page changes in my list, and since JumpToPageInput calls the onChange event of the number input, it reflects every time the number changes.

[github-actions[bot]]

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[ibodev1]

import i18n from '@/i18n';
import { InputNumber, type InputNumberChangeEvent } from 'primereact/inputnumber';
import type { PaginatorJumpToPageInputOptions, PaginatorTemplateOptions } from 'primereact/paginator';
import type React from 'react';
import { useState } from 'react';

const paginatorTemplate: PaginatorTemplateOptions = {
  layout: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageInput',
  JumpToPageInput: (options: PaginatorJumpToPageInputOptions) => {
    const { value, props, onChange } = options;

    const [inputValue, setInputValue] = useState<number>(value);

    // @ts-ignore - totalPages is not defined in PaginatorJumpToPageInputOptions
    const totalPages = props.totalPages || 0;

    const handleInputChange = (e: InputNumberChangeEvent) => {
      if (!e.value) return;
      const newPage = Math.max(1, Math.min(e.value, totalPages));
      setInputValue(newPage);
    };

    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
      if (e.key === 'Enter') {
        // @ts-ignore
        onChange({
          originalEvent: e,
          value: inputValue,
        });
      }
    };

    return (
      <InputNumber
        value={inputValue}
        defaultValue={value}
        min={1}
        max={totalPages}
        onChange={handleInputChange}
        onKeyDown={handleKeyDown}
        tooltip={i18n.t('common.press_enter_to_to_page')}
        tooltipOptions={{ position: 'top', showDelay: 200 }}
        className="max-w-[50px] text-center"
        inputClassName="max-w-[50px] text-center"
      />
    );
  },
};

export default paginatorTemplate;

I'm fixed like that, types wrong. @melloware @rburgst @jafin @aloker