react-component / react-component/virtual-list

Cannot read property 'removeEventListener' of null

Open
#74 5 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
814
Forks
171
Avg merge
1h 3m
Merged PRs (30d)
3

Description

This line of useMobileTouchMove.ts requires a null check on listRef.current:

      listRef.current.removeEventListener('touchstart', onTouchStart);

When a Select component in the latest ant design v4.6.5 is unmounted (ie. removed from the DOM), we get the following exception:

scheduler.development.js?034b:171 Uncaught TypeError: Cannot read property 'removeEventListener' of null
    at eval (useMobileTouchMove.js?684c:64)
    at HTMLUnknownElement.callCallback (react-dom.development.js?4b4a:3946)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?4b4a:3995)
    at invokeGuardedCallback (react-dom.development.js?4b4a:4057)
    at safelyCallDestroy (react-dom.development.js?4b4a:20501)
    at commitHookEffectListUnmount2 (react-dom.development.js?4b4a:20634)
    at commitPassiveUnmount (react-dom.development.js?4b4a:21705)
    at flushPassiveUnmountEffectsInsideOfDeletedTree (react-dom.development.js?4b4a:23600)
    at flushPassiveUnmountEffectsInsideOfDeletedTree (react-dom.development.js?4b4a:23593)
    at flushPassiveUnmountEffectsInsideOfDeletedTree (react-dom.development

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

In useMobileTouchMove.ts, start at the removeEventListener call identified in the issue and inspect how listRef.current is used during cleanup. Reproduce the Select unmount scenario described in the report and confirm that cleanup no longer throws when the referenced element is absent.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
1/5
Estimated time
Under an hour
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.