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 within componentDidMount. 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..

[fredlemieux]

Can you provide an example of what we can do with the ref element?

I can't find anything in the docs. Specifically I would like to attached a click event handler to the overlayRef element....

[diasbruno]

Hi all, I'll need time to have a look on this. But, it wouldn't be surprise that the reference is not available in certain moments.

[diasbruno]

For now, check the element to see it is null or not.

If someone wants to put the 🤠 to debug this, you can check how many times the contentRef callback is called from when you open the modal and close it.

This should give a result like this:

This because of the internal state changes and rendering.

First call: null (Request to open)
Second call: !null
Third call: !null
Fourth call: !null

[fredlemieux]

Is there no way to use it in the same way you would use refs? What's the use case for overlayRef? https://dmitripavlutin.com/react-useref-guide/