Skip to content

[BUG] Unhandled Timers Causing Test Failures and Runtime Errors After Unmount #100

@kguzek

Description

@kguzek

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.

Image

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.

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions