During the editing of page numbers, an unnecessary jump occurred.

[ruanimal]

Self Checks

• I have searched for existing issues search for existing issues, including closed ones.
• I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:)
• Please do not modify this template :) and fill in all the required fields.

Content

  // web/app/components/base/pagination/index.tsx
  const { run: handlePaging } = useDebounceFn((value: string) => {
    if (Number.parseInt(value) > totalPages) {
      setInputValue(totalPages)
      onChange(totalPages - 1)
      setShowInput(false)
      return
    }
    if (Number.parseInt(value) < 1) {
      setInputValue(1)
      onChange(0)
      setShowInput(false)
      return
    }
    onChange(Number.parseInt(value) - 1)
    setInputValue(Number.parseInt(value))
    setShowInput(false)
  }, { wait: 500 })

As long as the user pauses for more than 500 milliseconds (set by wait) during input, the page number update will be triggered.
For example, if a user wants to input "10" but pauses for more than 500 milliseconds after typing "1", the page will first jump to page 1.

We should perform the jump only when the user clearly indicates that the input is complete.
This is usually achieved in the following two ways:

• Press the Enter key: The user presses Enter to confirm after finishing the input.
• Input box loses focus (Blur): The user clicks elsewhere on the page, causing the input box to lose focus.

[dosubot[bot]]

The current debounce logic triggers a page jump if the user pauses while typing, which leads to premature navigation (for example, jumping to page 1 when the user intends to type 10). This happens because the debounced handler is called on every input change after a 500ms pause, not just when the user confirms their input.

A better approach is to trigger the page change only when the user presses Enter or the input loses focus (blur). To do this, remove the debounce logic from the input change handler and instead call your page change logic in the input's onBlur and onKeyDown (checking for Enter) events.

Here’s a simplified example of how you could refactor the input handling in React/TypeScript:

<Input
  value={inputValue}
  onChange={handleInputChange}
  onBlur={handleConfirm}
  onKeyDown={e => {
    if (e.key === 'Enter') handleConfirm();
  }}
/>

Where handleConfirm would contain your page validation and navigation logic (previously in the debounced function). This ensures the page only jumps when the user explicitly confirms their input, not on every pause in typing. This matches common UX patterns for pagination inputs and avoids the issue you described.
See the current implementation for reference.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[ruanimal]

resolved #26481