Cannot read property 'ownerDocument' of null

I’m getting this error thrown by the tabbable library which focus-trap-react depends on by way of focus-trap. At first I thought this might be a jest/enzyme problem but I’m also seeing it in non-test code.

TypeError: Cannot read property 'ownerDocument' of null
    at tabbable (index.js:21)
    at updateTabbableNodes (index.js:267)
    at Object.activate (index.js:72)
    at FocusTrap.componentDidMount (focus-trap-react.js:55)

I also noticed that the line that’s throwing this error is an older version than your most recent update of tabbable…perhaps a version update would help? I haven’t tested that yet, but I would love any input you have.

I’ve used this library before and had really great results with it, so thanks!

[jimmaaay]

I found that if the child of FocusTrap isn’t a HTML element then this error pops up.

E.g

Errors with Cannot read property 'ownerDocument' of null

<FocusTrap>
  <Fragment>
    {/* ...content */}
  </Fragment>
</FocusTrap>

Works

<FocusTrap>
  <div>
    {/* ...content */}
  </div>
</FocusTrap>

You can see an example here. Make sure its set to current module view. And checkout will-error.js & works.js

[davidtheclark]

@lukeschunk can you please be more specific about the situation in which this behavior is happening? This does not happen universally — for example, I’m not seeing it in the demos — so I think we need to identify what you and @pradel are doing that triggers the error.