-
Notifications
You must be signed in to change notification settings - Fork 87
Description
Version of the library: 1.4.2
Expected Behavior
When the OTPInput component unmounts, any internal timers created by syncTimeouts should be cleared to avoid unexpected state updates or side effects after unmounting. This should prevent runtime errors after tests which render OTPInput.
Current Behavior
The OTPInput component internally uses multiple setTimeout calls via syncTimeouts, but does not clear these timers on unmount when used in the component's useEffect hook. This causes an intermittent error:
ReferenceError: window is not defined
raised after the component is unmounted, e.g. after running tests using OTPInput.
Possible Solution
The component does not expose a cleanup callback in the useEffect hook that clears the started timeouts.
Steps to Reproduce
https://stackblitz.com/edit/sb1-absmg8bv?file=src%2Ftest%2Finput-otp.test.tsx
Open the editor view and run npm t in the terminal until you get an error.
Context (Environment)
I'm trying to test a React app which uses shadcn's input-otp which internally uses input-otp. Whenever I run the tests which render that component, I occasionally get errors caused by running timers after the component was unmounted. They come about occasionally (so not every time), but running the same test about 5-10 times usually yields the error a couple times.
Detailed Description
There's really not much more to it.
Possible Implementation
In the aforementioned effect hook, return a cleanup callback which calls clearTimeout for each of the timeout handles that are returned by syncTimeouts.
