React-big-calendar: IE11 findDOMNode exception in click selection with multiple routes

Created on 22 Feb 2019 · 5Comments · Source: jquense/react-big-calendar

Do you want to request a _feature_ or report a _bug_?

Bug

What's the current behavior?

Environment: IE11 with

react-big-calendar 0.20.3
moment 0.24.0
react 16.8.2
react-router 4.3.1
react-app-polyfill 0.2.1
babel-polyfill 7.2.5
installed.

Test-URL: https://martin-strobel.github.io/rbc-ie11-bug/dashboard
Test-Repo: https://github.com/martin-strobel/rbc-ie11-bug/

How to reproduce bug:

Open DEV-Console in IE11
Click on a date
Once weekview is visible: Try to select a timeslot or click somewhere else
This also occurs after switching back to dashboard route.
React shows error "Unable to find node on an unmounted component."

This seems to happen because of findDOMNode calls, but I was unable to fix this.
On an unrelated note: Sometimes timeslots are not rendered correctly, this doesn't seem to influence the reported bug.

This trace happened on the calendar (WeekView) page:

What's the expected behavior?

There shouldn't be any (uncaught) errors when switching between Routes.

Source

martin-strobel

Most helpful comment

It seems that IE incorrectly or not fully unsubscribes from listeners.
I suggest adding isDetached flag to the Selection class.

class Selection {
  constructor(node, { global = false, longPressThreshold = 250 } = {}) {
    this.isDetached = false
    ...
  }

  teardown() {
    this.isDetached = true
    ...
  }

  _handleInitialEvent(e) {
    if (this.isDetached) {
      return
    }
    ...
  }
}

If this approach makes sense, I can create a PR.

DenysZP on 2 Mar 2019

👍2

All 5 comments

It seems that IE incorrectly or not fully unsubscribes from listeners.
I suggest adding isDetached flag to the Selection class.

class Selection {
  constructor(node, { global = false, longPressThreshold = 250 } = {}) {
    this.isDetached = false
    ...
  }

  teardown() {
    this.isDetached = true
    ...
  }

  _handleInitialEvent(e) {
    if (this.isDetached) {
      return
    }
    ...
  }
}

If this approach makes sense, I can create a PR.

DenysZP on 2 Mar 2019

👍2

I'm also experiencing this issue, and this change also fixed it for me. @jquense can you confirm that this is a good approach to fixing it, then @DenysZP can make a PR?

dkniffin on 5 Apr 2019

Additionally, adding another if (this.isDetached) { return } inside _handleMoveEvent addresses this other error that's coming up: Unable to get property 'x' of undefined or null reference

dkniffin on 5 Apr 2019

I got same issues. Please let me know when will this issue be resolved? @jquense