fix: removed ability to enter non-number symbols to pagination

This commit is contained in:
Moyasee
2025-10-30 23:33:07 +02:00
parent 1bd88e6c6e
commit 80e0adcd49

View File

@@ -29,9 +29,11 @@ function JumpControl({
return isOpen ? (
<input
ref={inputRef}
type="number"
type="text"
min={1}
max={totalPages}
inputMode="numeric"
pattern="[0-9]*"
className="pagination__page-input"
value={value}
onChange={onChange}
@@ -87,13 +89,15 @@ export function Pagination({
}
const onJumpChange = (e: ChangeEvent<HTMLInputElement>) => {
const val = e.target.value;
if (val === "") {
const raw = e.target.value;
const digitsOnly = raw.replace(/\D+/g, "");
if (digitsOnly === "") {
setJumpValue("");
return;
}
const num = Number(val);
const num = parseInt(digitsOnly, 10);
if (Number.isNaN(num)) {
setJumpValue("");
return;
}
if (num < 1) {
@@ -104,19 +108,38 @@ export function Pagination({
setJumpValue(String(totalPages));
return;
}
setJumpValue(val);
setJumpValue(String(num));
};
const onJumpKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
// Allow common control keys
const controlKeys = [
"Backspace",
"Delete",
"Tab",
"ArrowLeft",
"ArrowRight",
"Home",
"End",
];
if (controlKeys.includes(e.key) || e.ctrlKey || e.metaKey) {
return;
}
if (e.key === "Enter") {
if (jumpValue.trim() === "") return;
const parsed = Number(jumpValue);
const sanitized = jumpValue.replace(/\D+/g, "");
if (sanitized.trim() === "") return;
const parsed = parseInt(sanitized, 10);
if (Number.isNaN(parsed)) return;
const target = Math.max(1, Math.min(totalPages, parsed));
onPageChange(target);
setIsJumpOpen(false);
} else if (e.key === "Escape") {
setIsJumpOpen(false);
} else if (!/^\d$/.test(e.key)) {
// Block any non-digit input (e.g., '.', ',')
e.preventDefault();
}
};