React modal not content not rendered on single instance (Version 3.1.2)

[RT-TL]

I use react modal in my app and it usually works fine. The app is a widget that is placed on various different sites. Now I face an issue where the -Component is not rendered anymore. While toggling it still works as intended no matter what content I put into the it does not appear. When checking variables I can see that the toggle actually works and there are some installations where the whole widget works as intended. I hope you can help me asking the right questions/looking in the right places to figure out the reason.

Here is my modal implementation:

<Modal
    className="questionnaire-component"
    isOpen={this.state.modalIsOpen}
    onRequestClose={() => this.setState({modalIsOpen: false})}
    style={ModalStyles}
    contentLabel="Questionnaire"
    onClick={this.closeModal}
>
    {this.state.loading ?
        <div style={{display: 'flex',justifyContent: 'center',margin: '50px'}}>
            <Loading type='balls' color='#3C3C3B'/>
        </div>
        :
        <div>Render component</div>
    }
</Modal>

The styles:

const ModalStyles = {
    overlay: {
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(255, 255, 255, 0.90)'
    },
    content: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        height: '100%',
        background: 'transparent',
        overflow: 'auto',
        WebkitOverflowScrolling: 'touch',
        outline: 'none'
    }
};

This might be unrelated but I also realised that tabbing through forms and close per click on backdrop do not work. I do not have any error statements (console or other). The app is build with webpack.

[diasbruno]

Hi @RT-TL, did you check if the component actually appears in the Dom tree?

[RT-TL]

hi diasbruno the and all it contains does not appear but the ModalPortal is there.

[diasbruno]

Ok, I'll still look for errors on this example, but the best way to validate this issue is to make a reproducible example. We have a simple boilerplate on the issue template.

[diasbruno]

Here is the link https://codesandbox.io/s/mgwy6V6E. It's a bit old now, but it's simple to update.

[RT-TL]

Thanks a lot. I will try to reproduce and update as soon as I managed to do so. So far I have been unsuccessful. I currently suspect some interference with other scripts but the issue is strange for this context. Any hint where this might be coming from would be very helpful.

[diasbruno]

My only guess right now is that probably you have a condition like this.state.loading can make it not render.

[RT-TL]

I still work on reproducing it in the sandbox but by now I know that the issue seems to appear in Chrome and Firefox, not in IE or Safari.

[aamin21]

Any more information on this?

[RT-TL]

Sorry, not from my side. I could neither solve nor reproduce the issue.