refactor: use string state for input control to avoid direct DOM manipulation

Author: cheeseburgertony

src/Pagination.tsx

@@ -90,10 +90,12 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     Math.min(internalCurrent, calculatePage(undefined, pageSize, total)),
   );
 
-  const [internalInputVal, setInternalInputVal] = React.useState(current);
+  const [internalInputVal, setInternalInputVal] = React.useState(
+    String(current),
+  );
 
   useEffect(() => {
-    setInternalInputVal(current);
+    setInternalInputVal(String(current));
   }, [current]);
 
   const hasOnChange = onChange !== noop;
@@ -129,31 +131,16 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     return iconNode as React.ReactNode;
   }
 
-  function getValidValue(e: any): number {
-    const inputValue = e.target.value;
+  function getValidValue(inputValue: string): number {
     const allPages = calculatePage(undefined, pageSize, total);
-    let value: number;
     if (inputValue === '') {
-      value = inputValue;
-    } else if (Number.isNaN(Number(inputValue))) {
-      value = internalInputVal;
-    } else if (inputValue >= allPages) {
-      value = allPages;
-    } else {
-      value = Number(inputValue);
+      return current;
     }
-    return value;
-  }
-
-  function getValidValueForFiltered(
-    originalValue: string,
-    filteredValue: string,
-  ): number | '' {
-    // If the input was completely filtered out (non-numeric), return current value
-    if (filteredValue === '' && originalValue !== '') {
-      return internalInputVal;
+    const numValue = Number(inputValue);
+    if (Number.isNaN(numValue)) {
+      return current;
     }
-    return getValidValue({ target: { value: filteredValue } });
+    return Math.min(Math.max(1, numValue), allPages);
   }
 
   function isValid(page: number) {
@@ -177,40 +164,44 @@ const Pagination: React.FC<PaginationProps> = (props) => {
       | React.KeyboardEvent<HTMLInputElement>
       | React.ChangeEvent<HTMLInputElement>,
   ) {
-    const inputElement = event.target as HTMLInputElement;
-    const originalValue = inputElement.value;
+    const inputValue = (event.target as HTMLInputElement).value;
 
     // Filter non-numeric characters for simple mode input
-    const numericValue = originalValue.replace(/\D/g, '');
-    if (numericValue !== originalValue) {
-      inputElement.value = numericValue;
-    }
+    const numericValue = inputValue.replace(/\D/g, '');
 
-    const value = getValidValueForFiltered(originalValue, numericValue);
-    // Handle empty string case
-    const numValue = typeof value === 'number' ? value : internalInputVal;
+    // Update display state
+    const allPages = calculatePage(undefined, pageSize, total);
+    const parsedValue = numericValue === '' ? 0 : Number(numericValue);
+    const displayValue =
+      parsedValue > allPages || (parsedValue < 1 && numericValue !== '')
+        ? String(Math.min(Math.max(1, parsedValue), allPages))
+        : numericValue;
 
-    if (numValue !== internalInputVal) {
-      setInternalInputVal(numValue);
-    }
+    setInternalInputVal(displayValue);
+
+    // Get valid value for page change
+    const validValue = getValidValue(numericValue);
 
     switch ((event as React.KeyboardEvent<HTMLInputElement>).keyCode) {
       case KeyCode.ENTER:
-        handleChange(numValue);
+        handleChange(validValue);
         break;
       case KeyCode.UP:
-        handleChange(numValue - 1);
+        handleChange(validValue - 1);
         break;
       case KeyCode.DOWN:
-        handleChange(numValue + 1);
+        handleChange(validValue + 1);
         break;
       default:
         break;
     }
   }
 
   function handleBlur(event: React.FocusEvent<HTMLInputElement, Element>) {
-    handleChange(getValidValue(event));
+    const inputValue = (event.target as HTMLInputElement).value;
+    const validValue = getValidValue(inputValue);
+    setInternalInputVal(String(validValue));
+    handleChange(validValue);
   }
 
   function changePageSize(size: number) {
@@ -219,7 +210,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
       current > newCurrent && newCurrent !== 0 ? newCurrent : current;
 
     setPageSize(size);
-    setInternalInputVal(nextCurrent);
+    setInternalInputVal(String(nextCurrent));
     onShowSizeChange?.(current, size);
     setCurrent(nextCurrent);
     onChange?.(nextCurrent, size);
@@ -235,10 +226,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
         newPage = 1;
       }
 
-      if (newPage !== internalInputVal) {
-        setInternalInputVal(newPage);
-      }
-
+      setInternalInputVal(String(newPage));
       setCurrent(newPage);
       onChange?.(newPage, pageSize);
 
@@ -321,7 +309,8 @@ const Pagination: React.FC<PaginationProps> = (props) => {
 
   function handleGoTO(event: any) {
     if (event.type === 'click' || event.keyCode === KeyCode.ENTER) {
-      handleChange(internalInputVal);
+      const validValue = getValidValue(internalInputVal);
+      handleChange(validValue);
     }
   }
 
@@ -411,7 +400,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
         style={styles?.item}
       >
         {isReadOnly ? (
-          internalInputVal
+          current
         ) : (
           <input
             type="text"