Undefined error in contentHasFocus method

[saradacp]

Summary:

Got the following error in the browser console when using react modal
Uncaught TypeError: Cannot read property 'contains' of undefined
at Object.contentHasFocus (ModalPortal.js:171)
at Object.focusContent (ModalPortal.js:101)
at Object.componentDidUpdate (ModalPortal.js:66)
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponent.js:729
at CallbackQueue.notifyAll (CallbackQueue.js:76)
at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)
at ReactReconcileTransaction.closeAll (Transaction.js:206)
at ReactReconcileTransaction.perform (Transaction.js:153)
at ReactUpdatesFlushTransaction.perform (Transaction.js:140)

Steps to reproduce:

1. When populating contents in the modal dynamically

Expected behavior:

Should be able to populate contents without any errors.

Additional notes:

A small undefined check in the react-modal.js resolved the issue. Will make a PR with the fix.

[claydiffrient]

What version of react-modal did you experience this with?

[saradacp]

1.6.5

[saradacp]

@claydiffrient : This fix is critical for us. The exception above might be a peculiar case but the code should work fine if this.content is undefined. Would you be able to fix it? Even if you run the test some of the tests are skipped because of this error. Please let me know if you want to talk over phone for more details. Thanks!

[diasbruno]

@saradacp I cannot reproduce this behavior.

If you can provide more details about what's happening it would be helpful.

Some ideas:

• What happens when this content is empty/clean?
• Are this content elements of a form?
• Is there something trying to focus other element while the modal is opened/opening?

[diasbruno]

@saradacp Another option for a temporary fix for this issue is to fork the project and make a branch with the fix. Then you can include your fork (and branch) in you package.json, until we find out what's going on.

[saradacp]

@diasbruno : Thanks for the advice. Will do that temporarily. The error is happening because the content is undefined
It's failing in (ModalPortal.js Line ~189)
contentHasFocus () {
return document.activeElement === this.content || this.content.contains(document.activeElement);
}
In the above code when setting the active element this.content is undefined hence failing at this point.
In my case, I have multiple modals and we close one modal while opening the other and the contents are fetched from an API. Is it possible to add a null check before calling contains? Thanks

[diasbruno]

If it don't drive the focus management crazy, it's the fix. :)

I believe that this line is suspicious ModalPortal.js#L216. A good place to see what's happening to this.content.

I'll try to make a test scenario for this case.

[diasbruno]

For some reason, the value of this.content gets defined, then null(??) and then this.content is defined again.

I cannot reproduce this error on none of the browsers. What was the browser that throws this error?

I guess checking for this.content != null can be safe.

[saradacp]

@diasbruno : I see that you made a few code changes but don't see the null check though. Did you get chance to publish the changes?
I'm seeing the issue in chrome browser.
Here is my use case:

1. I open a modal on a button click
   ---> this modal has a hyperlink content inside
2. clicking on that hyperlink would open another modal.
   ---> The second modal has a button inside
3. clicking on that button suppose to open the modal#1 again but here the code throws error
   Uncaught TypeError: Cannot read property 'contains' of undefined
   at Object.contentHasFocus (ModalPortal.js:171)
   at Object.focusContent (ModalPortal.js:101)
   at Object.componentDidUpdate (ModalPortal.js:66)
   at measureLifeCyclePerf (ReactCompositeComponent.js:75)
   at ReactCompositeComponent.js:729
   at CallbackQueue.notifyAll (CallbackQueue.js:76)
   at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)
   at ReactReconcileTransaction.closeAll (Transaction.js:206)
   at ReactReconcileTransaction.perform (Transaction.js:153)
   at ReactUpdatesFlushTransaction.perform (Transaction.js:140)

[diasbruno]

Thanks, @saradacp. I'm still not sure if that is the case.
The scenario you post is kinda odd, but I'll try to reproduce this problem and see what is going on.

[saradacp]

@diasbruno : Thank you for your continuous support. I tried to add the null check but the tests are failing. Attaching the code diff and failed test cases for reference. We have release in 2 weeks and desperately waiting for the fix :(

react-modal-test-error.txt

react_modal_diff.txt

[diasbruno]

The problem seems to be on contentHasFocus() which tries to call this.content.contains(...). So, probably this.content can be null or a DOMElement that doesn't has the method .contains().

On the images I posted, it's expected that this.content has the <div /> created for the modal.

The best way to find out is writing a console.log(this.content) before the return statement from contentHasFocus.

Before calling contains() we need to check if:

• this.content is null, than the function should return false.
• this.content is any other DOMElement other than the <div />, contains() should not be called. and return false.