IE11: Exception onBlur when next focused element is SVG

• downshift version: 1.31.2
• node version: 8.9.1
• npm (or yarn) version: yarn 1.5.1

Relevant code or config

input_handleBlur = () => {
    // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
    setTimeout(() => {
      const downshiftButtonIsActive =
        this.props.environment.document.activeElement.dataset.toggle &&
        (this._rootNode &&
          this._rootNode.contains(
            this.props.environment.document.activeElement,
          ))
      if (!this.isMouseDown && !downshiftButtonIsActive) {
        this.reset({type: Downshift.stateChangeTypes.blurInput})
      }
    })
  }

What you did:

Click the clear button (in IE11)

What happened:

Unable to get property 'toggle' of undefined or null reference

Reproduction repository:

<Downshift>
  {({ getButtonProps, getInputProps, clearSelection }) =>(
    <div>
      <input {...getInputProps()}/>
      <div>
        <button onClick={clearSelection}>X</button>
        <svg>
           {/* some SVG here */}
        </svg>
      </div>
    </div>
  )
</Downshift>

Problem description: dataset doesn’t exist on svg elements in IE11.

Suggested solution: Add additional check:

const downshiftButtonIsActive =
  this.props.environment.document.activeElement.dataset &&
  this.props.environment.document.activeElement.dataset.toggle &&
    (this._rootNode &&
    this._rootNode.contains(
    his.props.environment.document.activeElement,
   ))

[kentcdodds]

I’m fine with extra null checks.

[nmchaves]

Today I saw this exception for an IE 11 user on our system:

TypeError: Unable to get property 'dataset' of undefined or null reference
  at fn(../../node_modules/downshift/dist/downshift.esm.js:855:1)

My team is using Downshift v3.2.0.

The MDN docs explain that activeElement will be null if there is no focused element. The current logic that resolved this issue doesn’t test if document.activeElement is non-null. Unfortunately, I’m not exactly sure how the user got into this state, and I haven’t been able to reproduce the issue myself. Based on our Sentry error report, it doesn’t look like the user did anything unusual…I just haven’t been able to reproduce it 😅.

@kentcdodds would you be open to a PR with another check to make sure that activeElement is non-null?