Library breaking with upgrade to react 19

[shivam178]

Seems like the library is not working with latest upgrade to react, ie. React 19

[monolithed]

Here you go, but it only works with numbers:

PinInput

import React, {
    useState,
    useRef,
    useEffect,
    useMemo,
    useImperativeHandle,
    forwardRef
} from 'react';

import PinItem, {
    type Ref,
    type InputRef,
    type PinItemProps,
    DEFAULT_VALUE
} from './PinItem';

type EventCallback = (value: string, index: number) => void;

type Props = Partial<PinItemProps> & {
    initialValue?: string;
    length: number;

    onComplete?: EventCallback;
    onChange?: EventCallback;
};

const PinInput = forwardRef<InputRef, Props>(({
    length,
    initialValue = DEFAULT_VALUE,
    onComplete,
    onChange,
    ...props
}, ref) => {
    const defaultValues = useMemo(() => {
        return Array(length).fill(DEFAULT_VALUE);
    }, [length]);

    const initialValues = defaultValues.map((_, index) => initialValue[index]);

    const [values, setValues] = useState<string[]>(initialValues);
    const elements = useRef<React.RefObject<Ref | null>[]>([]);

    useImperativeHandle(ref, () => {
        const {current} = elements;

        return {
            focus: () => {
                if (length) {
                    const [firstInput] = current;
                    firstInput?.current?.focus();
                }
            },
            clear: () => {
                const [firstInput] = current;
                current.forEach((node) => node.current?.clear());

                setValues(defaultValues);
                firstInput?.current?.focus();
            }
        }
    });

    //  Этот код гарантирует, что рефы создаются только один раз при монтировании компонента,
    useEffect(() => {
        elements.current = defaultValues.map(() => {
            return React.createRef<Ref>();
        });

    // Добавление defaultValues в зависимости без useMemo сломает переключение на следующий инпут,
    // потому что рефы пересоздаются при каждом изменении defaultValues.
    }, [defaultValues]);

    const handleItemChange = (newValue: string, pasting: boolean, index: number) => {
        const updatedValues = [...values];

        updatedValues[index] = newValue;
        setValues(updatedValues);

        if (newValue.length === 1 && index < length - 1) {
            const input = elements.current[index + 1];

            input.current?.focus();
        }

        const pin = updatedValues.join(DEFAULT_VALUE);

        if (!pasting) {
            onChange?.(pin, index);
        }

        if (pin.length === length) {
            if (pasting && index < length - 1) {
                return void 0;
            }

            onComplete?.(pin, index);
        }
    };

    const handleBackspace = (index: number) => {
        if (index > 0) {
            const {current} = elements.current[index - 1];

            current?.focus();
        }
    };

    const handlePaste = (pastedValue: string) => {
        if (pastedValue.length !== length) {
            return void 0;
        }

        const updatedValues = pastedValue.split(DEFAULT_VALUE);
        let allUpdated = true;

        updatedValues.forEach((value, index) => {
            const {current} = elements.current[index];

            if (current) {
                current.update(value, true);
            }
            else {
                allUpdated = false;
            }
        });

        if (allUpdated) {
            setValues(updatedValues);
            onComplete?.(pastedValue, length - 1);
        }
    };

    return values.map((value, index) => {
        const ref = elements.current[index];

        return (
            <PinItem ref={ref}
                     key={index}
                     initialValue={value}
                     {...props}

                     onBackspace={() => handleBackspace(index)}
                     onPaste={index === 0 ? handlePaste : undefined}

                     onChange={(value, pasting) => {
                         handleItemChange(value, pasting, index)
                     }}
            />
        )
    });
});

export type {InputRef};
export {PinInput};

PinItem.tsx

import React, {
    useState,
    useRef,
    useEffect,
    useImperativeHandle,
    forwardRef,
} from 'react';

type Input = Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onPaste'>;
type EventCallback = (value: string, pasting: boolean) => void;

type Props = Input & {
    initialValue: string;
    autoSelect?: boolean;
    validate?: (value: string) => string;

    onChange: EventCallback;
    onBackspace: () => void;
    onPaste?: (value: string) => void;
};

type InputRef = {
    focus: () => void;
    clear: () => void;
};

type Ref = InputRef & {
    update: EventCallback;
};

enum Keys {
    BACKSPACE = 'Backspace'
}

const DEFAULT_VALUE = '';

const PinItem = forwardRef<Ref, Props>(({
    onChange,
    onBackspace,
    onPaste,
    onFocus,

    validate,
    initialValue = DEFAULT_VALUE,
    autoSelect,
    ...props
}, ref) => {
    const [value, setValue] = useState(validate ? validate(initialValue) : initialValue);
    const inputRef = useRef<HTMLInputElement>(null);
    const inputTimeout = useRef<NodeJS.Timeout | null>(null);

    const onKeyDown = ({key}: React.KeyboardEvent<HTMLInputElement>) => {
        if (key === Keys.BACKSPACE && (!value || !value.length)) {
            onBackspace?.();
        }
    };

    const updateValue = (updatedValue: string, pasting = false): void => {
        const validatedValue = validateValue(updatedValue);

        if (value === validatedValue && !pasting) {
            return void 0;
        }

        if (validatedValue.length < 2) {
            setValue(validatedValue);

            // Таймаут нужен для того, чтобы гарантировать, что onChange вызывается после того,
            // как setValue обновит состояние value.
            // Это позволяет избежать потенциальных проблем с асинхронным обновлением состояния React.
            inputTimeout.current = setTimeout(() => {
                onChange?.(validatedValue, pasting);
            }, 0);
        }
    };

    const handleChange = ({target}: React.ChangeEvent<HTMLInputElement>) => {
        updateValue(target.value);
    };

    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
        if (autoSelect) {
            event.target.select();
        }

        onFocus?.(event);
    };

    const handlePaste = ({clipboardData}: React.ClipboardEvent<HTMLInputElement>) => {
        const pastedValue = clipboardData.getData('text');

        onPaste?.(pastedValue);
    };

    const validateValue = (value: string): string => {
        if (validate) {
            return validate(value);
        }

        const code = value.charCodeAt(0);
        const integer = code >= '0'.charCodeAt(0) && code <= '9'.charCodeAt(0);

        return integer ? value : DEFAULT_VALUE;
    };

    useImperativeHandle(ref, () => ({
        focus: () => {
            inputRef.current?.focus();
        },
        clear: () => setValue(DEFAULT_VALUE),
        update: updateValue,
    }));

    // Сбрасываем таймаут
    useEffect(() => {
        return () => {
            const {current} = inputTimeout;

            if (current) {
                clearTimeout(current);
            }
        };
    }, []);

    return (
        <input ref={inputRef}
               autoComplete="off"
               maxLength={1}
               value={value}
               pattern="[0-9]*"
               type="numeric"
               inputMode="numeric"

               {...props}

               onChange={handleChange}
               onKeyDown={onKeyDown}
               onFocus={handleFocus}
               onPaste={handlePaste}
        />
    );
});

export default PinItem;
export {DEFAULT_VALUE};
export type {Ref, InputRef, Props as PinItemProps};

Example

<PinInput length={INPUT_FIELDS_COUNT}
                            ref={ref}
                            autoFocus={true}
                            disabled={disabled}
                            className={cn(styles.input, {[styles.disabled]: disabled})}
                            onComplete={handleSubmit}
                  />

.input {
  border: 1px solid red;
  font-size: 26px;
  text-align: center;
  margin: 0 2px;
  padding: 0;
}

  .input:focus {
      box-shadow: 0 0 10px 2px rgba(var(--theme-primary-color), .75);
      outline: none;
  }

  .disabled {
      box-shadow: 0 0 10px 2px rgba(var(--theme-white-color), .6);
  }

[shivam178]

Here you go, but it only works with numbers:

Thanks...
I'm using styled components; here's my version for the same:

import React, { useEffect, useRef, useState } from 'react'
import styled from 'styled-components'
import Regex from '../../utils/Regex'
import { CollectionUtil } from '../../utils'

const Container = styled.div`
  display: flex;
  justify-content: space-between;
  flex-direction: row;
`

const InputBox = styled.input`
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 1.5rem;
  border: 2px solid ${({ theme }) => theme.colors.surface2};
  border-radius: 5px;
  outline: none;
  transition: border-color 0.3s ease;
  color: ${({ theme }) => theme.colors.primary};

  &:focus {
    border-color: ${({ theme }) => theme.colors.primary};
  }
`

export const PinInput = ({
  fieldsNumber,
  testId,
  regex = Regex.ONLY_NUMBERS,
  onChange,
  onComplete,
  focusOnLoad = true,
}: PinInputProps) => {
  const [values, setValues] = useState<string[]>(Array(fieldsNumber).fill(''))
  const inputsRef = useRef<Array<HTMLInputElement | null>>([])

  useEffect(() => {
    if (focusOnLoad) {
      inputsRef.current[0]?.focus()
      if ('virtualKeyboard' in navigator) {
        ;(navigator.virtualKeyboard as any)?.show()
      }
    }
  }, [focusOnLoad])

  const handleChange = (value: string, index: number) => {
    if (regex && !regex.test(value) && value != '') {
      return
    }

    const newValues = [...values]
    newValues[index] = value.slice(-1)
    setValues(newValues)

    if (onChange) {
      onChange(newValues.join(''), index)
    }

    if (value && index < fieldsNumber - 1) {
      inputsRef.current[index + 1]?.focus()
    }

    if (newValues.every((val) => val) && onComplete) {
      onComplete(newValues.join(''), index)
    }
  }

  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
    e.preventDefault()
    const pastedData = e.clipboardData.getData('Text').slice(0, fieldsNumber)
    const filteredData = pastedData.split('').filter((char) => (regex ? regex.test(char) : true))
    const newValues = filteredData.slice(0, fieldsNumber)

    const lastIndex = newValues.length
    if (lastIndex >= 0 && lastIndex <= fieldsNumber && CollectionUtil.isNotEmpty(newValues)) {
      inputsRef.current[lastIndex === fieldsNumber ? lastIndex - 1 : lastIndex]?.focus()
    }

    if (newValues.length === fieldsNumber && onComplete) {
      onComplete(newValues.join(''), fieldsNumber - 1)
    }

    if (onChange) {
      onChange(newValues.join(''), lastIndex)
    }

    if (newValues.length !== fieldsNumber) {
      newValues.push(...Array(fieldsNumber - newValues.length).fill(''))
    }
    setValues(newValues)
  }

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
    if (e.key === 'Backspace') {
      if (values[index]) {
        const newValues = [...values]
        newValues[index] = ''
        setValues(newValues)
        if (onChange) {
          onChange(newValues.join(''), index)
        }
        return
      }
      if (index > 0) {
        inputsRef.current[index - 1]?.focus()
      }
    }
  }

  return (
    <Container data-testid={testId}>
      {values.map((value, index) => (
        <InputBox
          key={index}
          type="tel"
          maxLength={1}
          value={value}
          ref={(el) => {
            inputsRef.current[index] = el
          }}
          onChange={(e) => handleChange(e.target.value, index)}
          onKeyDown={(e) => handleKeyDown(e, index)}
          onPaste={handlePaste}
        />
      ))}
    </Container>
  )
}

interface PinInputProps {
  fieldsNumber: number
  testId?: string
  regex?: RegExp
  onChange?: (value: string, index: number) => void
  onComplete?: (value: string, index: number) => void
  focusOnLoad?: boolean
}

[arunghosh]

@shivam178 Thank you reporting the issue. Sorry for the delayed response.