Skip to content

InputOtp: TypeError on blur when component is unmounted (inputElRef null) #7453

@ecmadao

Description

@ecmadao

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

  1. Render NInputOtp inside a v-if block or on a page that navigates away
  2. Focus on one of the OTP input fields
  3. Trigger the unmount (toggle the v-if condition, or navigate to another route)

Link to minimal reproduction

bytebase/bytebase#19206

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.27

Used Package Manager

pnpm

Validations

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions