Function CodeField

packages/shared/src/components/fields/CodeField.tsx:19–165

({
  disabled,
  onChange,
  onSubmit,
  length = DEFAULT_LENGTH,
}: CodeFieldProps)

const INVALID_KEYS = [ArrowKey.Up, ArrowKey.Down, '.'];

export function CodeField({
  disabled,
  onChange,
  onSubmit,
  length = DEFAULT_LENGTH,
}: CodeFieldProps): ReactElement {
  const elementsRef = useRef<HTMLInputElement[]>(
    Array(Math.max(0, length)).fill(null),
  );
  const [code, setCode] = useState<string[]>(
    Array(Math.max(0, length)).fill(''),
  );

  const updateCode = (value: string, index: number) => {
    const newCode = [...code];
    newCode[index] = value;
    setCode(newCode);
    onChange?.(newCode.join(''));

    const finalCode = newCode.join('');

    if (finalCode.length === length && index === length - 1) {
      onSubmit(finalCode);
    }
  };

  const onSlice = (text: string) => {
    const sliced = text.slice(0, length);
    setCode(sliced.split(''));
    onChange?.(sliced);

    if (sliced.length === length) {
      onSubmit(sliced);
    }
  };

  const onPaste: ClipboardEventHandler<HTMLInputElement> = (e) => {
    const text = e.clipboardData.getData('text');
    const isNumbersOnly = checkIsNumbersOnly(text);

    if (!isNumbersOnly) {
      e.preventDefault();
      return;
    }

    onSlice(text);
  };

  const onKeyDown = async (
    e: KeyboardEvent<HTMLInputElement>,
    index: number,
  ) => {
    const { key } = e;
    const isNumbersOnly = checkIsNumbersOnly(key);

    if ((e.ctrlKey || e.metaKey) && key === 'v') {
      return;
    }