modal pop ups for split second and disappear when using browser back button

[cumibulat]

i got same issue like comment in this gist : https://gist.github.com/bummzack/a586533607ece482475e0c211790dd50

"When I use my browser's Back button, the modal pops up for a split second and then immediately disappears. Is this something history.block can't handle well? "

anyone encountering same issue ? if i use the Prompt component the issue is not happening, or it because Prompt is using alert not modal ?

[ZacharyRSmith]

Hi @cumibulat , thanks for opening an issue.

I have not seen this behavior, and cannot reproduce. Would you please provide steps to reproduce?

Please post the output of npm list react react-router react-router-dom react-router-navigation-prompt (with redactions if needed).

On which OS/browsers is this seen?

[cumibulat]

hi @ZacharyRSmith thanks for your prompt response. I hope i can help you to reproduce this issue by paste my code.
How i call this NavigationPrompt component :

    <NavigationPrompt when={!this.state.submitted && this.props.dirty}>
         {({onConfirm, onCancel}) => (
	    <ConfirmNavigationModal when={true} onCancel={onCancel} onConfirm={onConfirm}/>
        )}
    </NavigationPrompt>

ConfirmNavigationModal is my Component that render the Modal.

render() {
    return (
      <div>
        <Modal show={true}>
          <div className="modal-size-confirmmodal modal-position-confirmmodal">
            <h1 className="font-position-confirmmodal" >{this.props.intl.formatMessage(generalMessages.warningLeavePage)} </h1>
            <br/>
            <Divider />
            <br/>
            <div className="button-position-confirmmodal" >
              <button className="button-cancel" style={{borderRadius:"3px"}} onClick={this.props.onCancel}>{this.props.intl.formatMessage(generalMessages.cancel)}</button>
              <button className='button-save' style={{borderRadius:"3px"}} onClick={this.props.onConfirm}>{this.props.intl.formatMessage(generalMessages.ok)}</button>
            </div>
          </div>
        </Modal>
      </div>
    );
  }

Output of npm list react react-router react-router-dom react-router-navigation-prompt :

λ npm list react react-router react-router-dom react-router-navigation-prompt 
react-boilerplate@3.5.0 D:\RondoData\Trees\Projects\HARPA\HarpaFrontend       
+-- react-router-navigation-prompt@1.5.3                                      
`-- react-router-redux@5.0.0-alpha.6                                          
  `-- react-router@4.2.0  deduped                                             

i'm using Chrome Version 63.0.3239.132 (Official Build) (64-bit), Windows 10 64 bit.
This application is based on React-boilerplate

How i reproduce the issue :

1. redirect to page that have NavigationPrompt component
2. i fill the form to trigger the this.props.dirty to true
3. hit the back browser button
4. NavigationPrompt show and then close in split second.

this issue also happen when i use this code :

when={(crntLocation, nextLocation) => !nextLocation.pathname.startsWith(crntLocation.pathname)}

[ZacharyRSmith]

Hi @cumibulat , sorry for the delayed response.

I've been unable to reproduce this issue. Here is what I've tried

[ZacharyRSmith]

if i'm missing anything, please let me know. i'd love it if you pulled down that code and made the test setup so that it would fail

[cumibulat]

hi @ZacharyRSmith thanks for your effort looking into this issue, i have test your code and it works as expected. I build my apps using react-boilerplate and i have test this issue in plain react-boilerplate code, it is happening. I will take a look deeper. Cheers.

[santhoshworks]

@ZacharyRSmith Please close this issue as this is working as expected