Object doesn't support property or method 'focus'

[sambev]

Hi there,

I am running into an issue on IE11 in which the user "closes" the FocusTrap component and I run into this exception:
Object doesn't support property or method on 'focus'

Looking around the code, I notice I do not pass in focusTrapOptions.returnFocusOnDeactivate which is checked here in componentWillUnmount().

Since that prop is undefined it actually fails the !== false comparison and the component attempts to call previouslyFocusedElement.focus.

I figure I could:

a. Just pass the prop in as false.
b. Change the check to be a little less strict on false.
c. Provide a default value of false on the prop.

Any thoughts or completely different suggestions?

Thanks for your work on this!

[davidtheclark]

I think the undefined !== false check is working as intended, because the default value is supposed to be true (cf. https://github.com/davidtheclark/focus-trap#focustrap--createfocustrapelement-createoptions).

I don't know how you ended up in a situation where previouslyFocusedElement is not an element that supports focus. That's one mystery.

One fix would be to check that focus exists before trying to call it, so:

  if (
      this.props.focusTrapOptions.returnFocusOnDeactivate !== false &&
      this.previouslyFocusedElement && this.previouslyFocusedElement.focus
    ) {
      this.previouslyFocusedElement.focus();
    }

I'm still curious, though, why this error is happening ...

[sambev]

So, came back to update this. It seems, for some reason, in chrome, firefox, and safari that the previouslyFocusedElement is body but in IE it is the SVG icon that was clicked to open the FocusTrap.

[davidtheclark]

Aha. That's an annoying trick of IE's. You can treat it by adding focusable="false" to the SVG. But that goes to show that we should probably add the check that focus exists before calling it.

[sambev]

Sorry for the delay in my response. Adding `focusable="false"' did indeed fix the issue for me, thanks for that.

I think I like the idea of adding the check. Although I would never have found this issue with my svg if it weren't for the exception. Maybe that is okay?