Stops working when onChange handler is added.

[michailbrynard]

As soon as I add an onChange handler, the OTP input stops working (i.e. no digits appear when i type).

This is my code:

"use client"

import React from 'react';
import { OTPInput } from 'input-otp';
import { Slot, FakeDash } from '@/components/ui/otp';
import SectionContainer from '@/components/layout/SectionContainer';

const Test = () => {
    return (
        <SectionContainer>
            <OTPInput
                onChange={(code) => { console.log(code) }}
                maxLength={6}
                containerClassName="group flex items-center has-[:disabled]:opacity-30"
                render={({ slots }) => (
                    <>
                        <div className="flex">
                            {slots.slice(0, 3).map((slot, idx) => (
                                <Slot key={idx} {...slot} />
                            ))}
                        </div>

                        <FakeDash />

                        <div className="flex">
                            {slots.slice(3).map((slot, idx) => (
                                <Slot key={idx} {...slot} />
                            ))}
                        </div>
                    </>
                )}
            />
        </SectionContainer>
    )

};

export default Test;

The OTP input works without onChange={(code) => { console.log(code) }}, but when I add it, all the input boxes remain empty as I type.

[guilhermerodz]

Thanks for pointing out! Will soon add Vitest for these edge cases. (input value is uncontrolled, but onChange is provided, therefore the logic was wrong to think onChange was a setter since there is no state/control at all)

[michailbrynard]

Great, thanks for the quick fix! I tested again and it's working now.