React-modal: overlayRef and contentRef are undefined on componentDidMount

[joeswick999]

Summary:

overlayRef and contentRef are undefined on componentDidMount, but have the correct value on componentDidUpdate.

Steps to reproduce:

1. Set the overlayRef and contentRef prop on ReactModal.

2. console.log the value of overlayRef and contentRef inside componentDidMount.

3. The values will be undefined.

Expected behavior:

overlayRef and contentRef should hold the correct values on componentDidMount.

Link to example of issue:

https://codesandbox.io/s/qq9kpwxxp9

[diasbruno]

Hi @joeswick999, this behavior is correct is case the modal is closed. The internal elements are not rendered in this case, and, when unmounting those elements are destroyed.

Apparently, it seems that there is an issue when creating the modal with isOpen={true}. Those references should be available in this case.

Here is the test for this behavior Modal.spec.js#L698.

[joeswick999]

Hello @diasbruno
I am not too well versed on tests. But there is definitely an issue with overlayRef and contentRef being undefined regardless if isOpen is set to true or false.

Question is.. how do we fix it?

[joeswick999]

I came across another bug.. Any ref that is passed to Modal as a child will also be undefined on componentDidMount. I updated the codesandbox above to reflect the issue.

[janzenz]

Same exact problem as @joeswick999. Did you have any luck @diasbruno? :)

[davidsonpaul]

It seems like the best way to consistently access these is via the callbacks provided, and I think that's by design. For example accessing the content ref elem works as expected when doing this:

   <Modal
      ...
      contentRef={this.contentRefCallback}
   >

```
contentRefCallback = (node) => {
if (node) {
contentRef = node;

    //
    // Do stuff with content ref elem
    //
}

}
`` So it's not necessarily available withincomponentDidMount`. It seems the guaranteed/safest way is within the context of the callback.

[jkhaui]

It seems like the best way to consistently access these is via the callbacks provided, and I think that's by design. For example accessing the content ref elem works as expected when doing this:

   <Modal
      ...
      contentRef={this.contentRefCallback}
   >

contentRefCallback = (node) => {
   if (node) {
      contentRef = node; 

      //
      // Do stuff with content ref elem
      //
   }
}

So it's not necessarily available within componentDidMount. It seems the guaranteed/safest way is within the context of the callback.

Thanks a lot, I was completely stuck as to why I couldn't access refs passed to contentRef/overlayRef but this solved it. Should probably be added to the docs.

[davidsonpaul]

@jkhaui really glad it helped... think it took me some trial and error to figure that out as well :) Take care in these dismal days..