-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Description
Describe the bug
Description
NInputOtp throws TypeError: Cannot read properties of null (reading 'inputElRef') when the component is unmounted while one of its internal inputs has focus (e.g., during route navigation or v-if toggling).
TypeError: Cannot read properties of null (reading 'inputElRef')
at Array.some (<anonymous>)
at handleBlur (InputOtp.mjs)
Root Cause
In InputOtp.mjs, both handleFocus and handleBlur iterate over inputRefList.value using .some():
// handleFocus (line 95) and handleBlur (line 111)
inputRefList.value.some(inputInst => inputInst.inputElRef === e.relatedTarget)
When the component is being unmounted, Vue cleans up child component refs, setting some entries in inputRefList.value
to null. If a blur event fires during this teardown, the .some() callback accesses .inputElRef on a null entry and
crashes.
Suggested Fix
Add a null guard on inputInst:
inputRefList.value.some(inputInst => inputInst?.inputElRef === e.relatedTarget)
This needs to be applied in both handleFocus and handleBlur.
Environment
- naive-ui: 2.43.2
- Vue: 3.5.27
Steps to reproduce
- Render NInputOtp inside a v-if block or on a page that navigates away
- Focus on one of the OTP input fields
- Trigger the unmount (toggle the v-if condition, or navigate to another route)
Link to minimal reproduction
System Info
System:
OS: macOS 15.7.3
CPU: (10) arm64 Apple M1 Max
Memory: 1.40 GB / 64.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 24.5.0 - /opt/homebrew/bin/node
Yarn: 1.22.21 - /opt/homebrew/bin/yarn
npm: 11.5.1 - /opt/homebrew/bin/npm
pnpm: 10.23.0 - /Users/ecmadao/Library/pnpm/pnpm
Browsers:
Chrome: 144.0.7559.110
Firefox: 147.0.2
Safari: 26.2
npmPackages:
naive-ui: 2.43.2 => 2.43.2
vue: 3.5.27 => 3.5.27Used Package Manager
pnpm
Validations
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion.
- The provided reproduction is a minimal reproducible example of the bug.